Built with blockbuilder.org
xxxxxxxxxx<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> https://d3js.org/d3.v4.min.js