D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
czaroot
Full window
Github gist
Road Traffic Accidents
<!DOCTYPE html> <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> <body> <svg height="300" width="520"> <text x="10" y="35" style="fill: #333; font-family: sans-serif; font-weight: bold; font-size: 24pt;">ROAD TRAFFIC ACCIDENTS <tspan x="10" y="65" style="letter-spacing: .025em; font-weight: normal; font-size: 18pt; font-style: italic;">in Minsk (3/1/2013-3/19/2015)</tspan> </text> <!--road--> <line fill="none" stroke="#999" stroke-width="40" stroke-linecap="round" x1="20" y1="270" x2="500" y2="270"/> <!--headlights--> <circle cx="150" cy="190" r="8" fill="#ed1c24" /> <rect x="475" y="180" rx="4" ry="4" width="18" height="27" fill="#ccc" /> <!--body--> <polygon fill="#C1272D" points="150,170 490,170 480,240 155,240 "/> <polygon fill="#D6434E" points="160,180 480,180 477,200 161,200 "/> <!--bumpers--> <line fill="none" stroke="#999" stroke-width="20" stroke-linecap="round" x1="487" y1="223" x2="478" y2="223"/> <line fill="none" stroke="#999" stroke-width="20" stroke-linecap="round" x1="150" y1="223" x2="165" y2="223"/> <!--handle--> <line fill="none" stroke="#96272d" stroke-width="13" stroke-linecap="round" x1="275" y1="200" x2="290" y2="200"/> <line fill="none" stroke="#ccc" stroke-width="6" x1="275" y1="200" x2="283" y2="200"/> <circle cx="275" cy="200" r="3" fill="#ccc" /> <!--wheels--> <g id="wheel-first"> <circle cx="220" cy="240" r="35px" fill="#333" /> <circle cx="220" cy="240" r="20" fill="#e6e6e6" /> <circle cx="220" cy="240" r="16.5" stroke="#b3b3b3" stroke-width="3px" fill="none" /> <circle cx="220" cy="240" r="8" fill="#b3b3b3" /> <path d="M 220 212.5 c -15 0 -27.5 12 -27.5 27.5" stroke="#666" stroke-width="5px" stroke-linecap="round" fill="none" /> </g> <g id="wheel-second"> <circle cx="430" cy="240" r="35px" fill="#333" /> <circle cx="430" cy="240" r="20" fill="#e6e6e6" /> <circle cx="430" cy="240" r="16.5" stroke="#b3b3b3" stroke-width="3px" fill="none" /> <circle cx="430" cy="240" r="8" fill="#b3b3b3" /> <path d="M 430 212.5 c -15 0 -27.5 12 -27.5 27.5" stroke="#666" stroke-width="5px" stroke-linecap="round" fill="none" /> </g> <!--cabin--> <polygon fill="#7becff" points="219,110 330,110 380,170 190,170"/> <polygon fill="#C1272D" points="225,100 320,100 370,170 200,170"/> <!--windows--> <polygon fill="#7becff" points="265,110 319,110 359,170 265,170"/> <polygon fill="#7becff" points="238,110 257,110 257,170 224,170"/> <circle cx="285" cy="135" r="10" fill="#fff" /> <circle cx="305" cy="125" r="5" fill="#fff" /> <!--speed — vssss--> <line fill="none" stroke="#e6e6e6" stroke-width="10" stroke-linecap="round" x1="30" y1="175" x2="110" y2="175"/> <line fill="none" stroke="#e6e6e6" stroke-width="10" stroke-linecap="round" x1="70" y1="200" x2="110" y2="200"/> Sorry, your browser does not support inline SVG. </svg> <p>Now just look in the console!</p> <script type="text/javascript"> //Load in contents of CSV file d3.csv("data-gaiminsk.csv", function(data) { //Now CSV contents have been transformed into //an array of JSON objects. //Log 'data' to the console, for verification. console.log(data); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js