D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
lee00678
Full window
Github gist
State Health Ratio Bar Chart
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Adding Tooltips</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; } svg { background-color: white; } </style> </head> <body> <script type="text/javascript"> var w = 600; var h = 800; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.csv("statehealth.csv", function(data) { data.sort(function(a, b) { // return d3.descending(a.ChildAdultCare2012, b.ChildAdultCare2012); //If your numeric values aren't sorting properly, //try commenting out the line above, and instead using: // return d3.descending(+a.ChildAdultCare2012/+a.Population2012, +b.ChildAdultCare2012/+b.Population2012); // //Data coming in from the CSV is saved as strings (text), //so the + signs here force JavaScript to treat those //strings instead as numeric values, thereby fixing the //sort order (hopefully!). }); var rects = svg.selectAll("rect") .data(data) .enter() .append("rect"); rects.attr("x", 100) .attr("y", function(d, i) { return i * 13 + 5; }) .attr("width", function(d) { return d.ChildAdultCare2012 * 10000 / d.Population2012; }) .attr("height", 10) .append("title") .text(function(d) { var x = d.ChildAdultCare2012/d.Population2012; // console.log(x); return d.State + "'s child and adult care participants ratio (over state population) " + d3.format(".3p")(x); }); svg.selectAll("text") .data(data) .enter() .append("text") .text(function(d){ return d.State; }) .attr("x", 95) .attr("y", function(d, i){ return i * 13 + 13; }) .attr({ "fill": "black", "font-family": "sans-serif", "font-size": "8px", "text-anchor": "end" }) }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js