D3 Examples - US Infant Mortality by County

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
​
  body {
    font-family: arial, sans;
    font-size: 14px;
    width: 960px;
    margin: 40px auto;
  }
  svg {
    border: 1px solid #ccc; 
  }
​
  .states {
    stroke:#fff;
    fill:none;
  }
​
  .counties {
    stroke: #fff;
    fill: green;
    stroke-width: .3px;
  }
​
  .county-bubble {
    stroke:#fff;
    stroke-width: .3;
  }
</style>
​
<body>
​
</body>
​
<script src="https://d3js.org/d3.v4.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
​
​
<script type="text/javascript">
  
var width = 960,
    height = 500;
​
var color = d3.scaleLinear()
    .range(["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"])
    .domain([1300,1100,900,800,650,500,300]);
​
var radius = d3.scaleSqrt()
    .range([0,20])
    .domain([0,10000]);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.queue()
    .defer(d3.tsv, "infants.txt")
    .defer(d3.json, "us.json")
    .await(ready);
​
function ready(error, deaths, us) {
  if (error) return console.warn(error);
​
//   console.log(deaths);
//   console.log(us);
//   console.log(topojson.feature(us, us.objects.counties).features);
​
  deathsByFips = {};
  deaths.forEach(function(d) {
    d.Deaths = +d.Deaths;
//     console.log(d);
    d["Crude Rate"] = +(d["Crude Rate"].replace(" (Unreliable)", ""));
    deathsByFips[+d["County Code"]] = d;
  });
​
  var path = d3.geoPath()
    .projection(d3.geoAlbersUsa());
​
  var subset = topojson.feature(us, us.objects.counties).features.filter(function(d) {
    return d.id in deathsByFips;
  });
​
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(subset)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { 
        console.log(deathsByFips[d.id]["Crude Rate"]);
        return color(deathsByFips[d.id]["Crude Rate"])
      });
​
  /*
  svg.append("g")
      .attr("class", "county-bubble-group")
    .selectAll(".county-bubble")
      .data(subset)
    .enter().append("circle")
      .attr("class", "county-bubble")
      .attr("d", path)
      .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
      .attr("r", function(d) {
        return radius(deathsByFips[d.id].Deaths);
      })
      .style("fill", function(d) {
        return color(deathsByFips[d.id]["Crude Rate"]);
      })
      .on("mouseover", function(d) {
        console.log(deathsByFips[d.id]);
      });
      */
​
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
      .attr("class", "states")
      .attr("d", path);
svg.append("text")
    .attr("x", width - 130)
    .attr("y", height - 260)
    .text("Infant Mortality")
  
  var legend = svg.selectAll(".legend")
  .data(color.domain())
  .enter().append("g")
  .attr("transform", function(d,i){
    return "translate("+(width-130)+","+(height/2+16*i)+")";
  })
 legend.append("rect")
 .attr("width",12)
 .attr("height",12)
 .style("fill", function(d){
   return color(d);
 })
​
 legend.append("text")
    .attr("x",16)
    .attr("y",7)
    .attr("alighment-baseline","middle")
    .text(function(d){
    return d;
 });
​
}
</script>
​
    