D3 Examples - Mercator Map with Bubbles

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
    <style>
    </style>
    <script type="text/javascript">  
      function draw(geo_data) {
        "use strict";
        var margin = 75,
            width = 1400 - margin,
            height = 600 - margin;
​
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin)
            .attr("height", height + margin)
            .append('g')
            .attr('class', 'map');
​
        var projection = d3.geo.mercator()
                               .scale(140)
                               .translate([width / 2, height / 1.2]);
​
        var path = d3.geo.path().projection(projection);
​
        var map = svg.selectAll('path')
                     .data(geo_data.features)
                     .enter()
                     .append('path')
                     .attr('d', path)
                     .style('fill', 'lightBlue')
                     .style('stroke', 'black')
                     .style('stroke-width', 0.5);
​
        function plot_points(data) {
            
            function agg_year(leaves) {
                var total = d3.sum(leaves, function(d) {
                    return d['attendance'];
                });
​
                var coords = leaves.map(function(d) {
                    return projection([+d.long, +d.lat]);
                });
​
                var center_x = d3.mean(coords, function(d) {
                    return d[0];
                });
​
                var center_y = d3.mean(coords, function(d) {
                    return d[1];
                });
​
                return {
                  'attendance' : total,
                  'x' : center_x,
                  'y' : center_y
                };
            }
​
            var nested = d3.nest()
                           .key(function(d) {
                              return d['date'].getUTCFullYear();
                           })
                           .rollup(agg_year)
                           .entries(data);
​
            var attendance_max = d3.max(nested, function(d) {
                return d.values['attendance'];
            });
​
            var radius = d3.scale.sqrt()
                           .domain([0, attendance_max])
                           .range([0, 15]);
​
            svg.append('g')
               .attr("class", "bubble")
               .selectAll("circle")
               .data(nested)
               .enter()
               .append("circle")
               .attr('cx', function(d) { return d.values['x']; })
               .attr('cy', function(d) { return d.values['y']; })
               .attr('r', function(d) {
                    return radius(d.values['attendance']);
               })
               .attr('fill', 'rgb(247, 148, 32)')
               .attr('stroke', 'black')
               .attr('stroke-width', 0.7)
               .attr('opacity', 0.7);
               debugger;
        }
​
        var format = d3.time.format("%d-%m-%Y (%H:%M h)");
​
        d3.tsv("world_cup_geo.tsv", function(d) {
          d['attendance'] = +d['attendance'];
          d['date'] = format.parse(d['date']);
          return d;
        }, plot_points);
      };
      </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 to load the GeoJSON file
    */
    
d3.json("world_countries.json", draw);
  </script>
</body>
</html>
​
    