Country Labels on Centroids

Based on: https://bl.ocks.org/piwodlaiwo/c6e2478581d3932f99da781e9dade306 /piwodlaiwo/cbce7d163349da5c615a08b6e7a12d69

Next steps:

Consider showing labels on zoom based on country area! -- get area, assign class names based on area to zoom level relation -- zoom could apply a class and css handle hide/show
take a glance at http://blockbuilder.org/pnavarrc/75ec1502f51f86c2f43e

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.js"></script>
  
  <script src="https://unpkg.com/topojson-client@3"></script>
  <script src="https://d3js.org/queue.v1.min.js"></script>
  <style>
    body { margin:10px;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map { border:1px solid #000; background:#C6ECFF; }
    path {fill:#FDFBEA;stroke: #000;}
    .graticule {
      fill: none;
      stroke: #bbb;
      stroke-width: .5px;
      stroke-opacity: .5;
    }
    .name {
      font-size:14px;
    }
    .big {
      font-size:14px;
    }
    .small {
      font-size:10px;
    }    
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    const map = d3.select("#map");
    const width = map.node().getBoundingClientRect().width;
    const height = width / 2;

const projection = d3.geoMercator(); 
    const path = d3.geoPath().projection(projection);
    
    const zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([[0,0], [width, height]])
    .extent([[0, 0], [width, height]])
    .on("zoom", zoomed);
    
    const svg = map.append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoom);
    
    const g = svg.append("g");

queue()
    .defer(d3.json, "https://cdn.rawgit.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json")
    .defer(d3.tsv, "https://cdn.rawgit.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-country-names.tsv")
    .await(ready);
  
function ready(error, world, names) {
  if (error) throw error;

var countries = topojson.feature(world, world.objects.countries).features;

//map country names to IDs used on map
  var names_arr=[];
  names.forEach(function(i){
    names_arr[i.id]=i.name;
  });
  
  
  
  /*
      var centroids = countries.map(function (d){
        return projection(d3.geoCentroid(d))
  		});
			//console.log(centroids);
  */

// Compute each country’s centroid and its area
      countries.forEach(function(feature) {
        feature.properties.area = d3.geoArea(feature);
        //feature.properties.center = d3.geoCentroid(feature);
        feature.properties.center = projection(d3.geoCentroid(feature));
        feature.properties.name = names_arr[feature.id];
      });
      //console.log(countries[0]);
  
      // Sort the countries by area
      countries.sort(function(countryA, countryB) {
        return countryB.properties.area - countryA.properties.area;
      });
      console.log(countries[0]);

g.selectAll("path")
      .data(countries)
      .enter()
      .append("path")
      .attr("d", path);
  
  
      //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

g.selectAll("path")
      .data(countries)
      .enter()
      .append("path")
      .attr("d", path);

//g.selectAll("text").data(centroids)
       g.selectAll("text").data(countries)
    	 .enter().append("text")
       //.attr("x", function (d){ return d[0]; })
       //.attr("y", function (d){ return d[1]; })
       .attr("x", function (d){ return d.properties.center[0]; })
       .attr("y", function (d){ return d.properties.center[1]; })       
       .attr("class", "name")
       //.attr("dy", 5)
 		   //.style("fill", "black")
       .attr("text-anchor", "middle")
       .text(function(d) {
           //console.log(arr[countries[i].id]);
           //return arr[countries[i].id];
           return d.properties.name;
       });
       
  
       
};

function zoomed(){
  g.attr("transform", d3.event.transform);
}   
  </script>
</body>

https://d3js.org/d3.v4.js

https://d3js.org/topojson.v2.min.js

https://unpkg.com/topojson-client@3

https://d3js.org/queue.v1.min.js