USA 2016 presidential election by almccon

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//d3js.org/d3.v4.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    var width = 1000,
        height = 800;

    // Note: with d3.v4 we can't use "fallback projections"
    var projection = d3.geoAlbersUsa()
      //.scale(500)
      //.translate([width / 2, height / 2]);

    var color = d3.scaleLinear()
        .domain([20,50,80])
        .range(['blue','purple','red']);

    var svg = d3.select("body").append("svg")

    d3.queue()
      .defer(d3.json,"elpo12p010g.topojson")
      .defer(d3.csv, "2016_US_County_Level_Presidential_Results.csv")
      .awaitAll(function(error, results) {
      var usa2012 = results[0];
      var counties2016 = results[1];

      countyLookup = {};

      counties2016.forEach(function(county) {
        // convert county.fips to 5 digit string (pad leading zero with "05")
        var currentCounty = countyLookup[d3.format("05")(county.combined_fips)];
        if (!currentCounty) {
          countyLookup[d3.format("05")(county.combined_fips)] = county;
        }
      });

      if (error) return console.error(error);
      var counties = topojson.feature(usa2012, usa2012.objects.elpo12p010g).features;

      var countyPaths = svg.selectAll("path")
      		.data(counties)
      	.enter().append("path")
      		.attr("d", d3.geoPath(projection))
      		.style("fill", function(d) {
        if (countyLookup[d.properties.FIPS]) {
          return color(100 * +countyLookup[d.properties.FIPS].per_gop);
        } else {
          console.log("couldn't find lookup", d.properties);
          return 'black';
        }
      });
      //		.style("fill", function(d) { return color(+d.properties.PCT_ROM);});

    });
  </script>
</body>