D3 Examples - World Continents with D3v4 with Labels

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%;height:100% }
    path {fill:none;}
    .graticule {
      fill: none;
      stroke: #bbb;
      stroke-width: .5px;
      stroke-opacity: .5;
    }
  </style>
</head>
​
<body>
  <script>
    var width = 960;
    var height = 500;
    
    var color = d3.scaleOrdinal(d3.schemeCategory20);
​
    var graticule = d3.geoGraticule();
    var svg = d3.select("body").append("svg");
    var g = svg.append("g");
    
    var projection = d3.geoMercator()
      .scale(width / 2 / Math.PI)
      .translate([width / 2, height / 2])
      .rotate([-10,0]);
    
    var path = d3.geoPath().projection(projection);
    
    g.append("path")
     .datum(graticule)
     .attr("class", "graticule")
     .attr("d", path);
    
    //reference
    //techslides.com/demos/d3/worldmap-template-d3v4.html
    //https://github.com/piwodlaiwo/topojson
    //https://bl.ocks.org/micahstubbs/8e15870eb432a21f0bc4d3d527b2d14f (look into using d3.tip.js)
    var data = "https://piwodlaiwo.github.io/topojson//world-continents.json";
    
    
    d3.json(data, function(error, topology) {
      //var features = topojson.feature(world, world.objects.countries).features;
      var continents = topojson.feature(topology, topology.objects.continent).features;
      
      var centroids = continents.map(function (d){
        return projection(d3.geoCentroid(d))
        });
            console.log(centroids);
      /*
      Did not need polylabel.js for labels
      https://bl.ocks.org/Fil/da021023d58b8ddefd165c65e37f796b
      https://blockbuilder.org/pnavarrc/75ec1502f51f86c2f43e
      https://bl.ocks.org/hugolpz/42955069888057aff8c2
      https://blockbuilder.org/d3noob/401237468c9e38cea8c7
      */
      
      //var neighbors = topojson.neighbors(topology.objects.continent.geometries);
      
      svg.selectAll(".continent")
      .data(continents)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("title", function(d,i) { 
        //console.log(d.properties.continent)
        return d.properties.continent;
      })
      .style("fill", function(d, i) { return color(i); });
      //.style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return continents[n].color; }) + 1 | 0); });
​
  /*
      svg.selectAll(".centroid").data(centroids)
         .enter().append("circle")
       .attr("class", "centroid")
       .attr("fill", "rgba(255, 49, 255, 0.388)")
       .attr("stroke", "rgba(0, 0, 0, 0.5)")
       .attr("stroke-width", 0.1)
       .attr("r", 16)
       .attr("cx", function (d){ return d[0]; })
       .attr("cy", function (d){ return d[1]; });
*/
​
       svg.selectAll(".name").data(centroids)
         .enter().append("text")
       .attr("x", function (d){ return d[0]; })
       .attr("y", function (d){ return d[1]; })
       //.attr("dy", 5)
           .style("fill", "black")
       .attr("text-anchor", "middle")
       .text(function(d,i) {return continents[i].properties.continent ;});
      
      /*
       .attr("x", function(d) { return projection([d.lon, d.lat])[0]; })
       .attr("y", function(d) { return projection([d.lon, d.lat])[1]; })
       */
​
     
    })
​
  </script>
</body>
    