Flag map with D3js - SVG

This example belongs to the GeoExamples blog entry Flag map with D3js.

Basically, gets the flag images from the Wikipedia by using Mike Bostock's queue.js library and adds them to the map.

The zone represented in the map

The region represented in the map is marked in red.

This version uses SVG.

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

var flags = {"Senegal":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Flag_of_Senegal.svg/200px-Flag_of_Senegal.svg.png", 
            "Mali":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Flag_of_Mali.svg/200px-Flag_of_Mali.svg.png", 
            "Gambia":"https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Flag_of_The_Gambia.svg/200px-Flag_of_The_Gambia.svg.png", 
            "Mauritania":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Flag_of_Mauritania.svg/200px-Flag_of_Mauritania.svg.png", 
            "Guinea-Bissau":"https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Guinea-Bissau.svg/200px-Flag_of_Guinea-Bissau.svg.png",
            "Guinea":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Flag_of_Guinea.svg/200px-Flag_of_Guinea.svg.png",
            "Sierra Leone":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Flag_of_Sierra_Leone.svg/200px-Flag_of_Sierra_Leone.svg.png",
            "Liberia":"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Flag_of_Liberia.svg/200px-Flag_of_Liberia.svg.png",
            "Côte d'Ivoire":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Flag_of_C%C3%B4te_d%27Ivoire.svg/200px-Flag_of_C%C3%B4te_d%27Ivoire.svg.png",
            "Nigeria":"https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Flag_of_Nigeria.svg/200px-Flag_of_Nigeria.svg.png",
            "Burkina Faso":"https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Flag_of_Burkina_Faso.svg/200px-Flag_of_Burkina_Faso.svg.png",
            "Niger":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Flag_of_Niger.svg/200px-Flag_of_Niger.svg.png",
            "Cameroon":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Flag_of_Cameroon.svg/200px-Flag_of_Cameroon.svg.png",
            "Benin":"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flag_of_Benin.svg/200px-Flag_of_Benin.svg.png",
            "Togo":"https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Flag_of_Togo.svg/200px-Flag_of_Togo.svg.png",
            "Ghana":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Ghana.svg/200px-Flag_of_Ghana.svg.png",
            "Chad": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Flag_of_Chad.svg/200px-Flag_of_Chad.svg.png",
            "Gabon": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Flag_of_Gabon.svg/200px-Flag_of_Gabon.svg.png",
            "Equatorial Guinea": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Flag_of_Equatorial_Guinea.svg/200px-Flag_of_Equatorial_Guinea.svg.png",
            "Central African Republic": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Flag_of_the_Central_African_Republic.svg/200px-Flag_of_the_Central_African_Republic.svg.png",
            "Congo": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Flag_of_the_Republic_of_the_Congo.svg/200px-Flag_of_the_Republic_of_the_Congo.svg.png",
            "Algeria": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Flag_of_Algeria.svg/200px-Flag_of_Algeria.svg.png"};

var width = 960, height = 500; 
var projection = d3.geo.mercator()
      .scale(1400)
      .rotate([3,-10,0]);
 
 
var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geo.path()
    .projection(projection);
 
var keys = [];

for(var k in flags) keys.push(k);
  
var q = queue()
  .defer(d3.json, "/../../data/world-110m.json")
  .defer(d3.tsv, "/../../data/world-country-names.tsv");

q.await(ready);

function ready(error, world, names) {
  if (error) {
      alert('error: ' + error);
      return ;
  } 
  var countries = topojson.feature(world, world.objects.countries),
      land = topojson.feature(world, world.objects.land),
      globe = {type: "Sphere"};
      svg.append("path")  
        .datum(globe)  
        .style("fill", "#d8ffff")  
        .attr("d", path); 
      svg.append("path")  
        .datum(land)  
        .style("fill", "#d7c7ad")  
        .attr("d", path);

flag_countries = countries.features.filter(function(d) {
        return names.some(function(n) {
        if (d.id == n.id && keys.indexOf(n.name) > -1) {
          d.name = n.name
          d.flag_src = flags[n.name];
          return true;}
        });
      });
       
      for (i=0; i<flag_countries.length; i++) {

var bounds = path.bounds(flag_countries[i]);
        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;

svg.append("clipPath")
          .attr("class","mask")
          .attr("id",function(d){return flag_countries[i].id;})
          .append("path")
          .attr("d",path(flag_countries[i]));

svg.append("image")
          .attr("xlink:href",flag_countries[i].flag_src)
          .attr("x", bounds[0][0])
          .attr("y", bounds[0][1])
          .attr("width", bounds[1][0] - bounds[0][0])
          .attr("height", bounds[1][1] - bounds[0][1])
          .attr("preserveAspectRatio","none")
          .attr("clip-path", function(d){return "url(#"+flag_countries[i].id+")";});
        }

//Drawing the borders
      svg.append("path")  
        .datum(land)  
        .style("stroke", "#444444")  
        .style("fill", "None") 
        .attr("d", path(countries));
}

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Changed /mbostock/raw/4090846/world-110m.json to a local referenece

Changed /mbostock/raw/4090846/world-country-names.tsv to a local referenece

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

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

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