D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ssmaroju
Full window
Github gist
Contribution of each Indian State to the Total Number of Road Accidents in India
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Adding Tooltips</title> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <style type="text/css"> svg { background-color: white; } rect { fill: steelblue; } </style> </head> <body> <script type="text/javascript"> //https://gist.github.com/ssmaroju/5c58e65e7844c2ee6251 //https://bl.ocks.org/ssmaroju/5c58e65e7844c2ee6251 var svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 800); d3.csv("roadac2012_AnnexureII.csv", function(data) { data.sort(function(a, b) { return d3.descending(+a.shareAccidents2012, +b.shareAccidents2012); }); var rects = svg.selectAll("rect") .data(data) .enter() .append("rect"); rects.attr("x", 0) .attr("y", function(d, i) { return i * 20; }) .attr("width", function(d) { return d.shareAccidents2012 * 25; }) .attr("height", 15) .append("title") .text(function(d) { return d.states + "'s share of accidents in 2012 is " + d.shareAccidents2012 + "%"; }); myText = svg.selectAll("text") .data(data) .enter() .append('text') .text(function(d){return d.states;}) .attr('fill','steelblue') .attr('x', function(d) { return d.shareAccidents2012 * 25 + 10; }) .attr("y", function(d, i) { return i * 20 + 12; }) }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js