Skip to content

Instantly share code, notes, and snippets.

@stevenwmarks

stevenwmarks/.block

Last active July 29, 2017 02:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stevenwmarks/4a69e74d55dda66f1b77152de738d0f5 to your computer and use it in GitHub Desktop.
Save stevenwmarks/4a69e74d55dda66f1b77152de738d0f5 to your computer and use it in GitHub Desktop.
Download ZIP
boating accidents
Raw
.block
license: mit
border: no
scrolling: yes
height: 600
Raw
accData.csv
year totalAcc fatalAcc deaths
2012 4515 578 651
2013 4062 510 560
2014 4064 548 610
2015 4158 569 626
2016 4463 624 701
Raw
accType5yr.csv
accType accNum
Collision with recreational vessel 4935
Collision with fixed object 2389
Flooding/swamping 2321
Grounding 1943
Skier mishap 1590
Fall overboard 1436
Capsizing 1429
Person ejected from vessel 801
Fall in vessel 789
Fire/explosion (fuel) 778
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boating Accidents and Fatalities</title>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Verdana, Tahoma, sans-serif; }
#container svg { border: 1px solid gray;}
.line {
fill: none;
stroke: orange;
stroke-width: 4px;
opacity: 0;
}
#hede0 {font-weight: bold;
font-size: 16pt;
}
#band {
width: 565px;
height: 70px;
fill: red;
opacity: 0.33;
}
#blank0 {opacity: 0;
position: fixed;
left: 9px;
top: 9px;
width: 615px;
height: 550px;
z-index: 1;
background-color: white;
}
#text2 {opacity: 0;
font-weight: bold;
}
#hede1 {opacity: 0;
font-weight: bold;
font-size: 14pt;
}
.numBar { fill: #ff8c00; }
</style>
</head>
<body>
<div id="container">
<script type="text/javascript">
var margin = {top: 100, right: 20, bottom: 20, left: 50},
width = 615 - margin.left - margin.right,
height = 550 - margin.top - margin.bottom;
var parseTime = d3.timeParse("%Y");
//set scales (range)
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
//define line
var totalLine = d3.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.totalAcc); });
//append svg for chart
var svg = d3.select("#container").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//get data
d3.csv("accData.csv", function(error, data) {
if (error) throw error;
// format data
data.forEach(function(d) {
d.year = parseTime(d.year);
d.totalAcc = +d.totalAcc;
});
//set domains
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.totalAcc); })]);
// add X axis
svg.append("g")
.attr("transform", "translate(0, " + height + ")")
.call(d3.axisBottom(x)
.ticks(5));
// add Y axis
svg.append("g")
.call(d3.axisLeft(y));
//append hede0
svg.append("text")
.attr("x", 2000)
.attr("y", 0 - (height/10))
.attr("id", "hede0")
.text("Recreational Boating Accidents 2012-2016")
.transition() //fly in
.duration(2000)
.attr("x", 0);
//append dots for totalAcc
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.transition()
.delay(2000)
.duration(2000)
.attr("r", 6)
.attr("cx", function(d) { return x(d.year); })
.attr("cy", function(d) { return y(d.totalAcc); })
.style("fill", "orange");
//append line for totalAcc
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", totalLine)
.transition()
.delay(4000)
.duration(1000)
.style("opacity", 1);
//fly in rectangle for band
svg.append("rect")
.attr("x", 2000)
.attr("y",0 - 10)
.attr("id", "band")
.transition()
.delay(6000)
.duration(2000)
.attr("x", -5);
//append text1
svg.append("text")
.attr("x", 2000)
.attr("y", -2000)
.text("The total number of accidents each year stays within")
.transition()
.delay(4000)
.duration(2000)
.attr("x", 75)
.attr("y", 100);
//append text1a
svg.append("text")
.attr("x", 2000)
.attr("y", -2000)
.text("a fairly narrow range, roughly 4,000 to 4,500 accidents.")
.transition()
.delay(4500)
.duration(2000)
.attr("x", 75)
.attr("y", 120);
//append text2
svg.append("text")
.attr("x", 85)
.attr("y", 7)
.attr("id", "text2")
.text("Next: Types of Accidents 2012-2016")
.transition()
.delay(9000)
.style("opacity", 1);
//disappear everything with a fixed position div in white faded in
d3.select("body")
.append("div")
.attr("id", "blank0")
.transition()
.duration(1500)
.delay(11000)
.style("opacity", 1);
//This is "slide 2"
//append svg1 to slide 2
var margin1 = {top: 100, right: 20, bottom: 20, left: 160},
width1 = 615 - margin1.left - margin1.right,
height1 = 550 - margin1.top - margin1.bottom;
var svg1 = d3.select("#blank0").append("svg")
.attr("width", width1 + margin1.left + margin1.right)
.attr("height", height1 + margin1.top + margin1.bottom)
.append("g")
.attr("transform", "translate(" + margin1.left + "," + margin1.top + ")");
// set ranges
var y1 = d3.scaleBand()
.range([height1, 0])
.padding(0.2)
var x1 = d3.scaleLinear()
.range([0, width1]);
//append hede1
svg1.append("text")
.attr("x", 0 - 100)
.attr("y", 0 - (height1/10))
.attr("id", "hede1")
.text("Recreational Boating Accidents by Type 2012-2016")
.transition()
.delay(11500)
.style("opacity", 1);
// get data
d3.csv("accType5yr.csv", function(error, data) {
if (error) throw error;
// format data
data.forEach(function(d) {
d.accNum = +d.accNum;
});
//set domains
y1.domain(data.map(function(d) { return d.accType; }));
x1.domain([0, d3.max(data, function(d) { return d.accNum; })]);
// append saved rectangles to bar chart
svg1.selectAll(".numBar")
.data(data)
.enter().append("rect")
.attr("class", "numBar")
.attr("y", function(d) { return y1(d.accType); })
.attr("height", y1.bandwidth())
.attr("x", 0)
.attr("width", function(d) { return x1(d.accNum); });
// add X axis
svg1.append("g")
.attr("transform", "translate(0, " + height1 + ")")
.call(d3.axisBottom(x1));
// add Y axis
svg1.append("g")
.call(d3.axisLeft(y1));
}); //end of slide2
}); //end of slide1
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment