xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Car traffic in the East Midlands from 2007 to 2011</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } svg { background-color: white; } g.highlight path { stroke:yellow; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <h1>Car traffic in the East Midlands from 2007 to 2011</h1> <p>Traffic counts are averages given for 12 hours of a day from 7am to 6pm. Source: <a href="https://data.gov.uk/dataset/gb-road-traffic-counts/resource/8d49272c-e525-495e-a60c-a93d62aedd6e">gov.uk</a></p> <script type="text/javascript"> var w = window.innerWidth; var h = window.innerHeight/1.25; var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left var dateFormat = d3.time.format("%d"); var xScale = d3.time.scale() .range([ padding[3], w/2 - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([h - padding[2], padding[0]]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(12) .tickFormat(function(d) { return dateFormat(d) + ":00"; }); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(10); var line = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.hours)); }) .y(function(d) { return yScale(+d.amount); }); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.csv("car traffic 2007-2011.csv", function(data) { var hours = ["7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"]; var dataset = []; //Loop once for each row in data for (var i = 0; i < data.length; i++) { dataset[i] = { year: data[i].Year, count: [] }; //Loop through all the hours for (var j = 0; j < hours.length; j++) { // If value is not empty if (data[i][hours[j]]) { dataset[i].count.push({ hours: hours[j], amount: data[i][hours[j]] }); } } } xScale.domain([ d3.min(hours, function(d) { return dateFormat.parse(d); }) , d3.max(hours, function(d) { return dateFormat.parse(d); }) ]); yScale.domain([ d3.min(dataset, function(d) { return d3.min(d.count, function(d) { return +d.amount; }); }) - d3.max(dataset, function(d) { return d3.max(d.count, function(d) { return +d.amount; }); }) *.01, d3.max(dataset, function(d) { return d3.max(d.count, function(d) { return +d.amount; }); }) + d3.max(dataset, function(d) { return d3.max(d.count, function(d) { return +d.amount; }); }) *.01]); var groups = svg.selectAll("g") .data(dataset) .enter() .append("g"); groups.append("title") .text(function(d) { return d.year; }); groups.selectAll("path") .data(function(d) { return [ d.count ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("stroke", "transparent") .attr("stroke-width", 0); groups.classed("highlight", function(d) { if (d.year == "2011") { return true; } else { return false; } }) var yeartext = svg.selectAll("text") .data(dataset) .enter() .append("text") .attr("transform", "translate(" + padding[3] + "," + h/2 + ")") .attr("font-size",72) .transition() .duration(1500) .delay(function(d,i) { return i * 1500; }) .text(function(d) { return d.year; }) .remove(); var paths = groups.select("path") .transition() .duration(1350) .delay(function(d,i) { return i * 1350; }) .attr("stroke", "gray") .attr("stroke-width", 3); var xAxisCall = svg.append("g") .attr("class", "x axis") .attr("transform", "translate(" + 0 + "," + (h - padding[2]) + ")") .call(xAxis); var yAxisCall = svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + padding[3] + ",0)") .call(yAxis); svg.append("g") .append("text") .attr("transform", "translate(" + (w/3 + padding[3] + padding[1]) + "," + (h/2 + (padding[2] * -1)) + ")") .text("Average counts of cars fluctuated in the period from 2007 to 2011."); svg.append("g") .append("text") .attr("transform", "translate(" + (w/3 + padding[3] + padding[1]) + "," + (h/2 + (padding[2] * 0)) + ")") .text("However, the hours of highest and lowest traffic stayed very constant."); svg.append("g") .append("text") .attr("transform", "translate(" + (w/3 + padding[3] + padding[1]) + "," + (h/2 + (padding[2] * 1)) + ")") .text("Of note is the average traffic in 2011, as highlighted in yellow,"); svg.append("g") .append("text") .attr("transform", "translate(" + (w/3 + padding[3] + padding[1]) + "," + (h/2 + (padding[2] * 2)) + ")") .text("which decreased from the 2009 and 2010 levels."); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js