Skip to content

Instantly share code, notes, and snippets.

@stevenwmarks

stevenwmarks/.block

Last active August 14, 2017 17:01
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/0341df0712f48c7013684f7a023d3302 to your computer and use it in GitHub Desktop.
Save stevenwmarks/0341df0712f48c7013684f7a023d3302 to your computer and use it in GitHub Desktop.
Download ZIP
3 streamgraphs on a page
Raw
.block
license: mit
border: yes
scrolling: yes
height: 1650
Raw
accDay.csv
day accidents deaths injuries
Monday 450 70 257
Tuesday 341 75 180
Wednesday 317 63 178
Thursday 352 54 204
Friday 549 89 362
Saturday 1285 192 894
Sunday 1169 158 828
Raw
accHour.csv
hour accidents deaths injuries
12:00am � 2:30am 121 24 99
2:31am - 04:30am 42 14 16
4:31am - 06:30am 69 11 46
6:31am - 08:30am 137 31 73
8:31am - 10:30am 278 54 143
10:31am - 12:30pm 497 80 299
12:31pm � 2:30pm 745 97 479
2:31pm � 4:30pm 873 104 576
4:31pm - 6:30pm 768 102 535
6:31pm - 8:30pm 490 86 327
8:31pm - 10:30pm 273 46 208
10:31pm - 11:59pm 115 24 89
Raw
accMonth.csv
month accidents deaths injuries
Jan 84 25 39
Feb 88 28 48
Mar 168 39 98
Apr 259 48 182
May 517 70 335
Jun 728 111 440
Jul 1081 143 764
Aug 691 84 440
Sep 411 59 288
Oct 217 40 139
Nov 144 36 106
Dec 75 18 24
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boating Accidents by Day, Month and Hour</title>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
body, h2 { font-family: Verdana, Tahoma, sans-serif; }
p { font-size: 85%;
line-height: 1.2;
}
#all { margin: 0 auto;
width: 615px;
height: 1600px;
position: relative;
}
.legend { font-weight: bold;
font-size: 80%;
}
#whitebg {
width: 50px;
height: 50px;
fill: white;
}
</style>
</head>
<body>
<div id="all">
<h2>Boating Accidents by Day, Month and Hour</h2>
<div id="day">
<p>Recreational boating accidents follow a predictable pattern, as the
three charts below demonstrate. On weekends, there are more accidents,
injuries, and deaths. There are, of course, more boaters out during those
days as well. The first chart (known as a streamgraph) clearly shows the
steep increase in accidents and injuries during the weekend. Although the
number of deaths does increase on the weekend, the change is not as pronounced.</p>
<svg style="width:600px;height:450px;" ></svg>
<script type="text/javascript">
(function() {
d3.csv("accDay.csv", dataDay);
function dataDay(data) {
//set scales
var xScale = d3.scaleLinear().domain([0, 6]).range([38, 557]);
var yScale = d3.scaleLinear().domain([0, 1285]).range([400, 0]);
var events = ["accidents", "deaths", "injuries"];
//set color scale
var fillScale = d3.scaleOrdinal()
.domain(events)
.range(["steelblue", "red", "orange"]);
//generate stack
stackLayout = d3.stack()
.offset(d3.stackOffsetSilhouette)
.order(d3.stackOrderInsideOut)
.keys(events);
yScale.domain([-1300, 1300]);
//create areas
var stackArea = d3.area()
.x((d, i) => xScale(i))
.y0(d => yScale(d[0]))
.y1(d => yScale(d[1]));
stackArea.curve(d3.curveBasis);
d3.select("svg").selectAll("path")
.data(stackLayout(data))
.enter().append("path")
.style("fill", d => fillScale(d.key))
.attr("d", d => stackArea(d));
//scale for x axis
var dayScale = d3.scaleBand()
.domain(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])
.range([-5, 600]);
var xAxis = d3.axisBottom()
.scale(dayScale)
.tickSize(-400);
d3.select("svg")
.append("g")
.attr("transform", "translate(" + 0 + "," + 400 + ")")
.call(xAxis);
// add deaths legend
d3.select("svg")
.append("text")
.attr("x", 50)
.attr("y", 30)
.attr("class", "legend")
.style("fill", "red")
.text("Deaths");
// add injuries legend
d3.select("svg")
.append("text")
.attr("x", 50)
.attr("y", 45)
.attr("class", "legend")
.style("fill", "orange")
.text("Injuries");
// add accidents legend
d3.select("svg")
.append("text")
.attr("x", 50)
.attr("y", 60)
.attr("class", "legend")
.style("fill", "steelblue")
.text("Accidents");
}
})();
</script>
</div>
<div id="month">
<p>Boating accidents by month also follow a predictable
pattern. As you might expect, the summer months see an increase
in all of the categories.</p>
<svg style="width:600px;height:450px;", id="svg2" ></svg>
<script type="text/javascript">
(function() {
d3.csv("accMonth.csv", dataMonth);
function dataMonth(data) {
//set scales
var xScale = d3.scaleLinear().domain([0, 11]).range([20, 575]);
var yScale = d3.scaleLinear().domain([0, 1100]).range([400, 0]);
var events = ["accidents", "deaths", "injuries"];
//set color scale
var fillScale = d3.scaleOrdinal()
.domain(events)
.range(["steelblue", "red", "orange"]);
//generate stack
stackLayout = d3.stack()
.offset(d3.stackOffsetSilhouette)
.order(d3.stackOrderInsideOut)
.keys(events);
yScale.domain([-1100, 1100]);
//create areas
var stackArea = d3.area()
.x((d, i) => xScale(i))
.y0(d => yScale(d[0]))
.y1(d => yScale(d[1]));
stackArea.curve(d3.curveBasis);
d3.select("#svg2").selectAll("path")
.data(stackLayout(data))
.enter().append("path")
.style("fill", d => fillScale(d.key))
.attr("d", d => stackArea(d));
//scale for x axis
var monthScale = d3.scaleBand()
.domain(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
.range([-5, 600]);
var xAxis = d3.axisBottom()
.scale(monthScale)
.tickSize(-400);
d3.select("#svg2")
.append("g")
.attr("transform", "translate(" + 0 + "," + 400 + ")")
.call(xAxis);
//add white rectangle for legend
d3.select("#svg2")
.append("rect")
.attr("x", 50)
.attr("y",15)
.attr("id", "whitebg");
// add deaths legend
d3.select("#svg2")
.append("text")
.attr("x", 50)
.attr("y", 30)
.attr("class", "legend")
.style("fill", "red")
.text("Deaths");
// add injuries legend
d3.select("#svg2")
.append("text")
.attr("x", 50)
.attr("y", 45)
.attr("class", "legend")
.style("fill", "orange")
.text("Injuries");
// add accidents legend
d3.select("#svg2")
.append("text")
.attr("x", 50)
.attr("y", 60)
.attr("class", "legend")
.style("fill", "steelblue")
.text("Accidents");
}
})();
</script>
</div>
<div id="year">
<p>Again, boating incidents by the time of day follow an
expected pattern. </p>
<svg style="width:600px;height:500px;", id="svg3" ></svg>
<script type="text/javascript">
(function() {
d3.csv("accHour.csv", dataHour);
function dataHour(data) {
//set scales
var xScale = d3.scaleLinear().domain([0, 11]).range([25, 575]);
var yScale = d3.scaleLinear().domain([0, 1100]).range([400, 0]);
var events = ["accidents", "deaths", "injuries"];
//set color scale
var fillScale = d3.scaleOrdinal()
.domain(events)
.range(["steelblue", "red", "orange"]);
//generate stack
stackLayout = d3.stack()
.offset(d3.stackOffsetSilhouette)
.order(d3.stackOrderInsideOut)
.keys(events);
yScale.domain([-1100, 1100]);
//create areas
var stackArea = d3.area()
.x((d, i) => xScale(i))
.y0(d => yScale(d[0]))
.y1(d => yScale(d[1]));
stackArea.curve(d3.curveBasis);
d3.select("#svg3").selectAll("path")
.data(stackLayout(data))
.enter().append("path")
.style("fill", d => fillScale(d.key))
.attr("d", d => stackArea(d));
//scale for x axis
var hourScale = d3.scaleBand()
.domain(["12am – 2:30am", "2:31am - 4:30am", "4:31am - 6:30am", "6:31am - 8:30am", "8:31am - 10:30am", "10:31am - 12:30pm", "12:31pm – 2:30pm", "2:31pm – 4:30pm", "4:31pm - 6:30pm", "6:31pm - 8:30pm", "8:31pm - 10:30pm", "10:31pm - 11:59pm"])
.range([-1, 600]);
var xAxis = d3.axisBottom()
.scale(hourScale)
.tickSize(-400);
d3.select("#svg3")
.append("g")
.attr("transform", "translate(" + 0 + "," + 400 + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", "rotate(-70)");
//add white rectangle for legend
d3.select("#svg3")
.append("rect")
.attr("x", 50)
.attr("y",15)
.attr("id", "whitebg");
// add deaths legend
d3.select("#svg3")
.append("text")
.attr("x", 50)
.attr("y", 30)
.attr("class", "legend")
.style("fill", "red")
.text("Deaths");
// add injuries legend
d3.select("#svg3")
.append("text")
.attr("x", 50)
.attr("y", 45)
.attr("class", "legend")
.style("fill", "orange")
.text("Injuries");
// add accidents legend
d3.select("#svg3")
.append("text")
.attr("x", 50)
.attr("y", 60)
.attr("class", "legend")
.style("fill", "steelblue")
.text("Accidents");
}
})();
</script>
</div>
<div>
<p>Data Source: <a href="http://www.uscgboating.org">US Coast Guard Boating</a></p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment