D3 Examples - Cities and Population Map with D3

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
    <script src="d3.tip.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <style>
​
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background:black;}
    svg { width:100%; height: 100% }
    path {fill:none;color:#fff;}
    .graticule {
      fill: none;
      stroke: #bbb;
      stroke-width: .5px;
      stroke-opacity: .5;
    }
​
      circle {
        stroke: red;
        fill: rgba(0,0, 0, 0.2);
      }
​
      circle:hover { 
        stroke-width: 2px;
      }
​
      .d3-tip {
        font-family: 'Raleway', sans-serif;
        font-size: 1.5em;
        line-height: 1;
        padding: 7px;
        background: black;
        color: lightgray;
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <script>
      
      var xColumn = "longitude";
      var yColumn = "latitude";
      var rColumn = "population";
      var peoplePerPixel = 50000;
      
var width = 960,
    height = 580;
​
var projection = d3.geoMercator();
​
var path = d3.geoPath().projection(projection);
  
var graticule = d3.geoGraticule();
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);
​
svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");
​
svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
​
svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
  
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json", function(error, world) {
  if (error) throw error;
​
  var countries = topojson.feature(world, world.objects.countries).features,
      neighbors = topojson.neighbors(world.objects.countries.geometries);
​
  svg.selectAll(".country")
      .data(countries)
    .enter().insert("path", ".graticule")
      .attr("class", "country")
      .attr("d", path)
            .style("fill", "#fff");
      
      
      
      
      var populationFormat = d3.format(",");
​
      var tip = d3.tip()
        .attr("class", "d3-tip")
        .offset([-10, 0])
        .html(function(d) {
          return d.name + ": " + populationFormat(d.population);
        });
​
      svg.call(tip);
​
      var rScale = d3.scaleSqrt();
​
      function render(data){
​
        rScale.domain([0, d3.max(data, function (d){ return d[rColumn]; })]);
​
        // Compute the size of the biggest circle as a function of peoplePerPixel.
        var peopleMax = rScale.domain()[1];
        var rMin = 0;
        var rMax = Math.sqrt(peopleMax / (peoplePerPixel * Math.PI));
        rScale.range([rMin, rMax]);
        
        var circles = svg.selectAll("circle").data(data);
      circles.enter().append("svg:circle")
          .attr("cx", function (d){ return projection([d[xColumn],d[yColumn]])[0]; })
          .attr("cy", function (d){ return projection([d[xColumn],d[yColumn]])[1]; })      
          .attr("r",  function (d){ return rScale(d[rColumn]); })
          .on("mouseover", tip.show)
          .on("mouseout", tip.hide);      
        circles.exit().remove();
        
        
      }
​
      function type(d){
        d.latitude = +d.latitude;
        d.longitude = +d.longitude;
        d.population = +d.population;
        return d;
      }
​
      d3.csv("geonames_cities100000.csv", type, render);
​
});
​
d3.select(self.frameElement).style("height", height + "px");
​
    
    </script>
  </body>
    