xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title>Road Traffic Accidents in Minsk</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <style> body {margin: 75px 50px 100px; font-family: sans-serif; font-size: 14px;} .axis path {display: none;} .axis line { fill: none; stroke: rgb(200, 200, 200); shape-rendering: crispEdges; } .axis line {opacity: 0.5;} .axis g:first-child line {stroke: rgba(10, 20, 50, 0.75);} .axis text { font-family: sans-serif; font-size: 11px; } /*.axis.y line {opacity:0;}*/ circle.rta:hover {fill: rgb(255, 180, 60);} h1 {font-family: serif; font-size: 42px; font-style: italic;} #legend {font-size: 14px; font-style: italic;visibility: hidden;} #legend span {display: block; width: 12px; height: 12px; border-radius: 6px; float: left; margin: 3px 5px 0 0;} #totalRTA {background: #069;} #victimsRTA {background: #046;} </style> <body> <h1>Road Traffic Accidents<br />in Minsk in 2015</h1> <p>This scatter plot shows the number of road traffic accidents a day (yAxis)<br /> and the number of drivers, prosecuted for violation of traffic rules (xAxis) in Minsk</p> <p>Actually, they have no connections and it was made just for practice</p> <p>source: <a href="https://gaiminsk.by/svodka">gaiminsk.by</a></p> <div id="legend"> <span id="totalRTA"></span> — total number of accidents<br /> <span id="victimsRTA"></span> — accidents with victims </div> <script type="text/javascript"> var dataset; //var padding = [15, 10, 20, 75]; var padding = {top:30, right:10, bottom:40, left:28}; // oh, it's a brilliant idea to use object instead of array for increase code readability var w = 800; var h = 600; var svg = d3.select("body") .append("svg") .attr({ width: w, height: h }); var xScale = d3.scale.linear() .range([ 0 , w - padding.right - padding.left]); var yScale = d3.scale.linear() .range([ padding.top, h - padding.bottom]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .tickSize(-(h - padding.top - padding.bottom)) .tickPadding(10); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickSize(-(w - padding.left - padding.right)) .tickPadding(10); //Load in contents of CSV file d3.csv("data-gaiminsk.csv", function(data) { dataset = data; xScale.domain([0, d3.max(dataset, function(d) { return +d.prosecuted + 10; })]); yScale.domain([ d3.max(dataset, function(d) { return +d.RTA + 10; }), 0 ]); // axes go here // put them here to make :hover-effect and title-tags work in chart svg.append("g") .attr("class", "axis y") .attr("transform", "translate(" + padding.left + ", 0)") .call(yAxis) // label for yAxis .append("text") .attr("text-anchor", "start") .attr({ class: "ylabel", y: 15, x: -padding.left, }) .text("Number of RTA") .style({ "font-size": 12, "font-style": "italic" }); svg.append("g") .attr("class", "axis x") .attr("transform", "translate(" + padding.left + "," + (h - padding.bottom) + ")") .call(xAxis) // label for xAxis .append("text") .attr("text-anchor", "end") .attr({ class: "xlabel", y: 38, x: w - padding.left - padding.right, }) .text("Number of drivers, which were prosecuted for violation of traffic rules") .style({ "font-size": 12, "font-style": "italic" }); // drawing circles var circles = svg.selectAll(".rta") .data(data) .enter() .append("circle"); circles .attr("class", "rta") .attr({ cx: function(d) { return xScale(d.prosecuted) + padding.left; }, cy: function(d) { return yScale(d.RTA); }, r: 0.1, fill: "#069" }) // title elements with some information // would not work if axes lines goes over circles .append("title") .text(function(d) { return "There were " + d.RTA + " acccidents at " + d.date + " and " + d.victims + " accidents were with victims. " + d.prosecuted + " drivers were prosecuted for violation of traffic rules."; }); //transitions circles .sort(function(a, b) { return d3.ascending(+a.prosecuted, +b.prosecuted); }) .transition() .delay (function(d, i) { return i * 5; }) .duration(500) .attr({ r: 3, }); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js