USA 2012 presidential election value-by-alpha (d3v3) by almccon

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.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;
    //var projection = d3.geo.albersUsa() // Did you know, it's actually the default projection for d3.geo.path?!
    //  .scale(500)
    //  .translate([width / 2, height / 2]);
    
    var color = d3.scale.linear()
        .domain([20,50,80])
        .range(['blue','purple','red']);
    
    var svg = d3.select("body").append("svg")

    d3.json("elpo12p010g.topojson", function(error, usa2012) {
      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.geo.path().projection(projection))    // default
      		.attr("d", d3.geo.path())
      //		.style("stroke-width", 0.5)
      //		.style("stroke", function(d) { return color(+d.properties.PCT_ROM);})
      		.style("fill", function(d) { return color(+d.properties.PCT_ROM);});

      var opacityScale = d3.scale.linear()
          .domain([0, d3.max(counties, function(d) { return +d.properties.TTL_VT; })])
          .range([0.1, 1]);

      countyPaths
          .transition()
          .delay(2000)
          .duration(2000)
          .style("opacity", function(d) { return opacityScale(+d.properties.TTL_VT); });
    });
  </script>
</body>