D3.js Aurelien

Inspired by [rveciana]](/rveciana/)'s block 'Flag map with D3js - SVG'

forked from espinielli's block: D3.js Boetti

<!DOCTYPE html>
<meta charset="utf-8">

var width = 1200,
        height = 700;

// @Joan change ICI :
		var projection = 
        //d3.geoCylindricalEqualArea() 
    		//d3.geoCylindricalStereographic()
    		//d3.geoEquirectangular()
    		//d3.geoMiller()
    		//d3.geoMercator()
    		//d3.geoNaturalEarth1()
		    d3.geoPatterson()
		    .scale(80)
		    .translate([width / 2, height / 2])
		    .precision(.1);
		    
		var path = d3.geoPath()
		    .projection(projection);
		
		var graticule = d3.geoGraticule();
		
		var svg = d3.select("body").append("svg")
		    .attr("width", width)
		    .attr("height", height)
		    .attr('transform', 'rotate(180 -50 -50)');
		
		svg.append("path")
		    .datum(graticule)
		    .attr("class", "graticule")
	    	.attr("d", path)
      	.attr("stroke","#777")
  			.attr("stroke-width",".2px")
		  	.attr("stroke-opacity",".3");

var q = d3.json(w110).then(function(world) {
      d3.tsv(wnames).then(function(names) {
      d3.tsv(wflags).then(function(flags) {

flags.forEach(function (d) { d.id = +d.id;});
        flags.sort(function(a,b) {
          return +a.id < +b.id ? -1 : +a.id > +b.id ? +1 : 0;
        });

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

countries = countries.filter(function(d) {
			    return names.some(function(n) {
            if (d.id == n.id) {
              return d.name = n.name;
            }
    			});
  			});
      
        countries = countries.filter(function(d) {
			    return flags.some(function(n) {      
            if (d.id == n.id) {
            	var bounds = path.bounds(d);
            	if (bounds[0][0] < 0) bounds[0][0] = 0;
            	if (bounds[1][0] > width) bounds[1][0] = width;
            	if (bounds[0][1] < 0) bounds[0][1] = 0;
            	if (bounds[1][1] < 0) bounds[1][1] = height;
              
             d.bounds = bounds; 
              
              return d.url = n.url;
            }
    			});
  			});

svg.selectAll("country")
      	.data(countries)
      	.enter()
        .insert("image", ".graticule")
      		.attr("class", "country")
          .attr("xlink:href", function (d){return d.url;})
          .attr("x", function (d) {
        			return (
                d.bounds[0][0] - 6 +
              	(d.bounds[1][0] - d.bounds[0][0])/2
              );
      				})
          .attr("y", function (d) {
        		return (
              d.bounds[0][1] - 6 +
             (d.bounds[1][0] - d.bounds[0][0])/2
            );
      		})
//          .attr("width", function (d) {return (d.bounds[1][0] - d.bounds[0][0]);})
//          .attr("height", function (d) {return (d.bounds[1][1] - d.bounds[0][1]);})
//          .attr("width", "12")
          .attr("height", "6")
	        .attr("preserveAspectRatio", "xMidYMid meet");

// interior boundaries
  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
			.attr("d", path)
		  .attr("fill","none")
    	.attr("stroke","#777")
  		.attr("stroke-width",".5px")
//		  .attr("stroke-opacity",".3");
	// exterior boundaries
  svg.insert("path", ".graticule")
    .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a === b}))
    .attr("d", path)
    .attr("class", "boundary")
	  .attr("fill","none")
   	.attr("stroke","#777")
  	.attr("stroke-width",".5px")
//	  .attr("stroke-opacity",".3");
	})
  })
  });

</script>
</body>

</html>

https://d3js.org/d3.v5.min.js

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

https://d3js.org/d3-queue.v3.min.js

https://d3js.org/d3-geo.v1.min.js

https://d3js.org/d3-geo-projection.v2.min.js