USA 2012 presidential election proportional circles (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");

    var background_g = svg.append("g");
    var foreground_g = svg.append("g");

    var path = d3.geo.path();
    d3.json("elpo12p010g.topojson", function(error, usa2012) {

      // Add the background
      background_g.append("path")
        .datum(topojson.feature(usa2012, usa2012.objects.elpo12p010g))
        .attr("d", path)
        .style("fill", "#ddd");
    });

    d3.json("elpo12p010g_centroids.geojson", function(error, usa2012) {

      var counties = usa2012.features;

      var barHeight = d3.scale.linear()
        .domain([0, d3.max(counties, function(d) { return +d.properties.ttl_vt; })])
        .range([0, 100]); // 0 to maximum height in pixels

      var circleRadius = d3.scale.sqrt()
        .domain([0, d3.max(counties, function(d) { return +d.properties.ttl_vt; })])
        .range([0, 50]); // 0 to maximum radius in pixels

      /*
      // add vertical bars for each county
      var countyBars = foreground_g.append("g").attr("id", "countyBars");

      countyBars.selectAll("path")
          .data(counties.sort(function(a,b) { if (a.geometry.coordinates[1] < b.geometry.coordinates[1]) return 1; if (a.geometry.coordinates[1] > b.geometry.coordinates[1]) return -1; return 0; }))
        .enter().append("rect")
          .attr("x", function(d) { return projection(d.geometry.coordinates)[0] - 3; }) // Subtract 3 because width of bar will be 6
          .attr("y", function(d) { return projection(d.geometry.coordinates)[1] - barHeight(+d.properties.ttl_vt); })
          .attr("width", 6)
          .attr("height", function(d) { return  barHeight(+d.properties.ttl_vt); })
          .style("fill", function(d) { return color(+d.properties.pct_rom);});
      */

      // add proportional circles for each county
      var countyCircles = foreground_g.append("g").attr("id", "countyCircles");

      countyCircles.selectAll("path")
          .data(counties.sort(function(a,b) { if (+a.properties.ttl_vt < +b.properties.ttl_vt) return 1; if (+a.properties.ttl_vt > +b.properties.ttl_vt) return -1; return 0; }))
        .enter().append("circle")
          .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
          .attr("r", function(d) { return circleRadius(+d.properties.ttl_vt); })
          .style("fill", function(d) { return color(+d.properties.pct_rom);});
    });
  </script>
</body>