Built with blockbuilder.org
xxxxxxxxxx<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="https://www.uscgboating.org">US Coast Guard Boating</a></p> </div> </div> </body></html> https://d3js.org/d3.v4.min.js