D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
syntagmatic
Full window
Github gist
Deaths by Circulatory Disease 1999-2015
<!doctype html> <style> body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #222; } .bar { display: inline-block; height: 10px; background: #999; border: 1px solid #666; } </style> <body> <script src="https://d3js.org/d3.v4.js" charset="utf-8"></script> <script type="text/javascript"> var xscale = d3.scaleLinear() .range([0, 600]); var color = d3.scaleThreshold() .domain([50, 150, 300, 600, 900, 1200, 2000]) .range(["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"]); d3.tsv("circulatory-by-age.csv", function(error, data) { data.forEach(function(d) { d["Crude Rate"] = +d["Crude Rate"]; d["Deaths"] = +d["Deaths"]; }); var subset = data.filter(function(d) { return d["Ten-Year Age Groups"] != "Not Stated"; }).filter(function(d) { return d["Notes"] != "Total"; }); xscale.domain(d3.extent(data, function(d) { return d["Deaths"]; })); var nested = d3.nest() .key(function(d) { return d["Ten-Year Age Groups"]; }) .key(function(d) { return d["ICD Sub-Chapter"]; }) .entries(subset); nested.reverse(); var ageGroups = d3.select("body") .selectAll("div.age-group") .data(nested) .enter().append("div") .attr("class", "age-group"); console.log(nested); ageGroups.append("h3") .text(function(d) { return d.key; }); var bars = ageGroups.selectAll("div.bar-group") .data(function(d) { return d.values; }) .enter().append("div") .attr("class", "bar-group") .sort(function(a,b) { return b.values[0]["Deaths"] - a.values[0]["Deaths"]; }); bars .append("span") .attr("class", "bar") .style("width", function(d) { return xscale(d.values[0]["Deaths"]) + "px"; }) .style("background", function(d) { return color(d.values[0]["Crude Rate"]); }); bars .append("span") .style("margin-left", "5px") .text(function(d) { return d3.format(",")(d.values[0]["Deaths"]) + " - " + d.key; }); }); </script>
Modified
http://d3js.org/d3.v4.js
to a secure url
https://d3js.org/d3.v4.js