xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title>Road Traffic Accidents in Minsk</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <style> body {font-family: 'Open Sans', sans-serif;} .annotation {margin: 50px 0 75px 50px; width: 800px;} h1 {font-size: 2.5em; font-weight: 300;} .textRed {color: red; font-weight: 700;} .textSteelBlue {color: steelblue; font-weight: 700;} .source {font-size: 0.75em; font-style: italic; color: gray;} a, a:visited {color: black;} a:hover {color: red;} .axis path, .axis line { fill: none; stroke: rgb(245, 245, 245); stroke-width: 1; shape-rendering: crispEdges; } .y path, .x path {display: none;} .y g:first-child line {stroke: rgb(200, 200, 200);} .axis text { font-family: sans-serif; font-size: 11px; } path { fill: none; stroke: rgb(200, 200, 200); stroke-width: 1; shape-rendering: geometricPrecision; opacity: 0.75; } g path:hover {stroke-width: 2;} g.highlight path {stroke-width: 2;} g.red path {stroke: red;} g.steelblue path {stroke: steelblue;} g.highlight path:hover {stroke-width: 3;} .tick text {font-size: 9px;} </style> <body> <div class="annotation"> <h1>Road Traffic Accidents in Minsk, 2015</h1> <p>This line chart shows some data from <a href="https://gaiminsk.by/svodka">daily reports</a> by gaiminsk.by, such as the number of <span class="textSteelBlue">Road traffic accidents</span> and <span class="textRed">Accidents with victims</span>.</p> <p>It is not final version yet, but a practical part for module 6 <a href="https://twitter.com/hashtag/knightd3">#knightD3 </a>.</p> </div> <script type="text/javascript"> var w = 900, h = 600, padding = {top:20, right:20, bottom:50, left:50}; var dateFormat = d3.time.format("%x"); var xScale = d3.time.scale() .range([padding.left, w - padding.right - padding.left]), yScale = d3.scale.linear() .range([padding.top, h - padding.bottom]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(8) .tickSize(-(h - padding.top)) .tickPadding(10) .tickFormat(function(d) { return dateFormat(d); }), yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickSize(-(w - padding.left - padding.right - 50)) .tickPadding(10) .ticks(10); var categories = [/*"date",*/ "numRTA", "drunkRTA", "numRTAwithVictims", "numDead", "numWounded", "numDrunkDr", "numUnlicensedDr", /*"numSpeedingDr", "numPedestriansViolatingRules",*/ "numDrProsecuted"] var line = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.day)); }) .y(h - padding.bottom) .interpolate("monotone"), line2 = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.day)); }) .y(function(d) { return yScale(+d.amount); }) .interpolate("monotone"); var svg = d3.select("body") .append("svg") .attr({ width: w, height: h }); //Load in contents of CSV file d3.csv("data-gaiminsk_15.csv", function(data) { dataset = [] for (i = 0; i < categories.length; i++) { dataset[i] = { catName: categories[i], accidents: [] }; for (var j = 0; j < data.length; j++) { dataset[i].accidents.push({ day: data[j].date, amount: data[j][categories[i]] }); } } xScale.domain([ d3.min(data, function(d) { return dateFormat.parse(d.date); }), d3.max(data, function(d) { return dateFormat.parse(d.date); }) ]); yScale.domain([ d3.max(dataset, function(d) { if (d.catName == "numPedestriansViolatingRules" || d.catName == "numSpeedingDr") { return false; } else { return d3.max(d.accidents, function(d) { return +d.amount; }); } }), 0 ]); // here goes axes svg.append("g") .attr("class", "axis x") .attr("transform", "translate(0 ," + (h - padding.bottom) + ")") .call(xAxis)// .append("text")// .attr("text-anchor", "start")// .attr({// class: "xlabel",// y: 15,// x: -padding.left,// })// .text("Date")// .style({// "font-size": 12,// "font-style": "italic"// }); svg.append("g") .attr("class", "axis y") .attr("transform", "translate(" + (padding.left) + ", 0)") .call(yAxis);// .append("text")// .attr("text-anchor", "start")//// .attr("transform", "rotate(-90)")//// .attr("text-anchor", "middle")// .attr({// class: "ylabel",// y: padding.top,// x: -25,// })// .text("Number of accidents")// .style({// "font-size": 12,// "font-style": "italic"// }); var groups = svg.selectAll(".line") .data(dataset) .enter() .append("g") .attr("class", function(d) { if (d.catName == "numRTA") { return "highlight steelblue"; } else if (d.catName == "numRTAwithVictims") { return "highlight red"; } else { return ""; } }); groups.append("title") .text(function(d) { return d.catName; }); var catLine = groups.selectAll("path") .data(function(d) { return [ d.accidents ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line);// .style("opacity", 0); catLine.transition() .delay (500) .duration(2000) .attr("d", line2);// .style("opacity", 0.5); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js