D3 Examples - World Map

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
   <script src="https://d3js.org/topojson.v1.min.js"></script>
   <script src="https://d3js.org/d3-array.v1.min.js"></script>
   <script src="https://d3js.org/d3-geo.v1.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
​
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
     * {
            font-family: "Helvetica Neue";
        }
​
        p,
        text {
            font-size: 0.85em;
        }
​
        svg {
            background: white;
        }
​
        .country {
            fill: #cccccc;
            stroke: #333;
            stroke-width: 0.8;
        }
​
        .selected {
            fill: yellow;
        }
​
        .graticule {
            fill: none;
            stroke: #555;
            stroke-width: .5px;
            stroke-opacity: .5;
        }
​
        .city-name {
            font-size: 10px;
        }
​
        .city-circles {
            fill: cyan;
        }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
    var margin = { top: 50, left: 50, right: 50, bottom: 50 },
    width = 1000 - margin.left - margin.right;
  height = 800 - margin.top - margin.bottom;
​
  //var svg = d3
  svg
    .attr("height", height + margin.top + margin.bottom)
    .attr("width", width + margin.left + margin.right)
    .append("g")
    .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
  /* 
        Read in world.topojson
        Read in capitals.csv 
  */
​
  d3
    .queue()
    .defer(d3.json, "world-110m.json")
    .defer(d3.csv, "country-capitals.csv")
    .await(ready);
​
  /* 
       Create new projection using Mercator (first)
       and zoom in a certain amount (scale)
  */
  var projection = d3
    .geoAitoff()
    .translate([width / 2, height / 2])
    .scale(110);
  //create path (geoPath) using projection
    
  var path = d3.geoPath().projection(projection);
​
  var graticule = d3.geoGraticule();
​
  function ready(error, data, capitals) {
    console.log(data);
​
    var countries = topojson.feature(data, data.objects.countries).features;
    
    console.log(countries);
    /* 
       Add a path for each country
       Shapes -> path
    */
   /* 
    svg
      .selectAll(".country")
      .data(countries)
      .enter()
      .append("path")
      .attr("class", "country")
      .attr("d", path)
      .on("mouseover", function(d) {
        // Add the class 'selected'
        d3.select(this).classed("selected", true);
      })
      .on("mouseout", function(d) {
        //Remove the class 'selected'
        d3.select(this).classed("selected", false);
      });
       console.log(capitals);
​
    svg
      .selectAll(".city-circles")
      .data(capitals)
      .enter()
      .append("circle")
      .attr("r", 2)
      .attr("cx", function(d) {
        var coords = projection([d.CapitalLongitude, d.CapitalLatitude]);
        console.log(coords);
        return coords[0];
      })
      .attr("cy", function(d) {
        var coords = projection([d.CapitalLongitude, d.CapitalLatitude]);
        return coords[1];
      })
      .attr("class", "city-circles");
​
    svg
      .selectAll(".city-name")
      .data(capitals)
      .enter()
      .append("text")
      .attr("class", "city-name")
      .attr("x", function(d) {
        var coords = projection([d.CapitalLongitude, d.CapitalLatitude]);
        console.log(coords);
        return coords[0];
      })
      .attr("y", function(d) {
        var coords = projection([d.CapitalLongitude, d.CapitalLatitude]);
        return coords[1];
      })
      .text(function(d) {
        return d.CapitalName;
      })
      .attr("dx", 5)
      .attr("dy", -2);
     */
    svg
      .append("path")
      .datum(graticule)
      .attr("class", "graticule")
      .attr("d", path);
  }
  </script>
</body>
​
    