D3 Examples - Deaths by Circulatory Disease 1999-2015

xxxxxxxxxx
 
<!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>
​
    