D3 Examples - Adult obesity

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,
        color = d3.scaleLinear()
 .range(["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"])
    .domain([0.20,0.225,0.25,0.275,0.30,0.325]);
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
  d3.queue()
    .defer(d3.tsv, "birthsState.txt")
    .defer(d3.json, "us.json")
    .await(ready);
​
  function ready(error, obesity, us) {
  if (error) return console.warn(error);
  console.log(obesity);
  console.log(us);
  console.log(topojson.feature(us, us.objects.states).features);
  obesityByState = {};
  obesity.forEach(function(d) {
    d["obesityRate"] = +d["obesityRate"];
    obesityByState[+d["State Code"]] = d;
  });
  var path = d3.geoPath()
    .projection(d3.geoAlbersUsa());
  var subset = topojson.feature(us, us.objects.states).features.filter(function(d) {
    return d.id in obesityByState;
  });
  svg.append("g")
      .attr("class", "states")
    .selectAll("path")
      .data(subset)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { 
        return color(obesityByState[d.id]["obesityRate"])
      });
  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")
    .style("font-weight", "bold")
    .attr("x", width - 170)
    .attr("y", height - 158)
    .text("% obesity");
​
  var legend = svg.selectAll(".legend")
    .data(color.domain())
    .enter().append("g")
    .attr("transform", function(d,i) {
      return "translate(" + (width-160) + "," + (height - 150 + 16 * i) + ")";
    })
    .on("click", function(min,i) {
      console.log(min,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("alignment-baseline", "middle")
    .style("font-size", "12px")
    .text(function(d) {
      return (d*100).toFixed(0)+"%";
    });
  
  }
</script>
    