D3 Examples - Geographic distribution of entrants in Run For The Parks

xxxxxxxxxx
 
​
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
#states path {
  fill: #ddd;
  stroke: #fff;
}
​
path.arc {
  pointer-events: none;
  fill: none;
  stroke: #000;
  display: none;
}
​
path.cell {
  fill: none;
  pointer-events: all;
}
​
circle {
  fill: steelblue;
  fill-opacity: .8;
  stroke: #fff;
}
​
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v2.js"></script>
    <script type="text/javascript">
​
var w = 960,
    h = 500;
​
var projection = d3.geo.azimuthal()
    .mode("equidistant")
    .origin([-98, 38])
    .scale(1100)
    .translate([440, 260]);
​
var path = d3.geo.path()
    .projection(projection);
​
​
var svg = d3.select("body").insert("svg:svg", "h2")
    .attr("width", w)
    .attr("height", h);
​
var states = svg.append("svg:g")
    .attr("id", "states");
​
var circles = svg.append("svg:g")
    .attr("id", "circles");
​
d3.json("us-states.json", function(collection) {
  states.selectAll("path")
      .data(collection.features)
    .enter().append("svg:path")
      .attr("d", path);
});
​
d3.json("results_geocode.json", function(collection) {
    var positions = [];
​
    collection.filter(function(a) {
        return (a.lon && a.lat);
    }).forEach(function(a) {
      positions.push(projection([+a.lon, +a.lat]));
    });
​
    var n = d3.values(d3.nest()
        .key(function(d) {
            return [d.lon, d.lat].join('');
        })
        .rollup(function(d) {
            return {
                count: d.length,
                lon: d[0].lon,
                lat: d[0].lat,
                name: d[0].home
            }
        })
        .map(collection))
        .sort(function(a, b) { return b.count - a.count; });
​
    circles.selectAll('circle')
        .data(n)
      .enter().append('svg:circle')
            .attr('transform', function(d, i) {
                return 'translate(' + projection([d.lon, d.lat]) + ')'; })
            .attr('r', function(d) {
                return Math.max(Math.log(d.count) * 4, 4);
            });
    });
​
    </script>
  </body>
</html>
​
    