Country Labels based on Area

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

https://bl.ocks.org/pnavarrc/12e05466d99b99dbee85

forked from piwodlaiwo's block: Country Labels on Centroids

<!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;
    }
  </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;
      });
      var c_min = countries[0].properties.area.toFixed(8);
      var c_max = countries[countries.length-1].properties.area.toFixed(8);
      console.log( c_min );
      console.log( c_max );
  
      var textrange = d3.scaleLinear().domain([c_max, c_min]).range([4, 20]);
      //console.log( textrange(0.41519723) );
      //console.log( textrange(0.00000002) );
  
      //countries.forEach(function(c){
        //console.log(c.properties.name+' area is '+c.properties.area.toFixed(8))
      //});
  
      g.selectAll("path")
      .data(countries)
      .enter()
      .append("path")
      .attr("id", function (d){ return 'id_'+d.id; })
      .attr("d", path);

g.selectAll("text").data(countries)
    	 .enter().append("text")
       .attr("x", function (d){ return d.properties.center[0]; })
       .attr("y", function (d){ return d.properties.center[1]; })       
       .attr("class", "big")
       .attr("text-anchor", "middle")
       .text(function(d) {
           return d.properties.name;
       })
       //.style('fill', 'red');  
       .style('font-size', function (d){ 
         return textrange(d.properties.area.toFixed(8))
         //console.log( d.properties.area.toFixed(8) ); 
         //return 30*d.properties.area.toFixed(8);  
       });
  
  	  //you dont need to preslice!
  /*
      var big = countries.slice(0,100);
      var small = countries.slice(100,240);

g.selectAll("text").data(big)
    	 .enter().append("text")
       .attr("x", function (d){ return d.properties.center[0]; })
       .attr("y", function (d){ return d.properties.center[1]; })       
       .attr("class", "big")
       .attr("text-anchor", "middle")
       .text(function(d) {
           //return d.properties.name;
           //return d.properties.area;
       });

g.selectAll("text").data(small)
    	 .enter().append("text")
       .attr("x", function (d){ return d.properties.center[0]; })
       .attr("y", function (d){ return d.properties.center[1]; })       
       .attr("class", "small")
       .attr("text-anchor", "middle")
       .text(function(d) {
           //return d.properties.name;
       });    
  */
  
  
  
  
      //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

//dont put text inside of path but maybe group them in their own g
  /*
        g.selectAll("path")
      .data(countries)
      .enter()
      .append("path")
      .attr("d", path)
      .append("text")
        .attr("x", function (d){ return d.properties.center[0]; })
       .attr("y", function (d){ return d.properties.center[1]; }) 
        .attr("class", "name")
         .text(function(d) {
           return d.properties.name;
       });
  */
  
  /*
      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