D3 Examples - D3.js Aurelien

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<body>
    <div id="map"></div>
    <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <script src="https://d3js.org/d3-queue.v3.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>
​
  <script>
    var wflags = "https://gist.githubusercontent.com/espinielli/5107491/raw/world-country-flags.tsv",
        w110 = "https://gist.githubusercontent.com/mbostock/4090846/raw/world-110m.json",
        wnames = "https://gist.githubusercontent.com/mbostock/4090846/raw/world-country-names.tsv";
​
​
    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>
​
    