D3 Examples - Flag map with D3js

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
 
<body>
​
<div id="map"></div>
 
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
​
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>
    