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 region represented in the map is marked in red.
This version uses SVG.
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="map"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>
var flags = {"Senegal":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Flag_of_Senegal.svg/200px-Flag_of_Senegal.svg.png",
"Mali":"http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Flag_of_Mali.svg/200px-Flag_of_Mali.svg.png",
"Gambia":"http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Flag_of_The_Gambia.svg/200px-Flag_of_The_Gambia.svg.png",
"Mauritania":"http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Flag_of_Mauritania.svg/200px-Flag_of_Mauritania.svg.png",
"Guinea-Bissau":"http://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Guinea-Bissau.svg/200px-Flag_of_Guinea-Bissau.svg.png",
"Guinea":"http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Flag_of_Guinea.svg/200px-Flag_of_Guinea.svg.png",
"Sierra Leone":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Flag_of_Sierra_Leone.svg/200px-Flag_of_Sierra_Leone.svg.png",
"Liberia":"http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Flag_of_Liberia.svg/200px-Flag_of_Liberia.svg.png",
"Côte d'Ivoire":"http://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":"http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Flag_of_Nigeria.svg/200px-Flag_of_Nigeria.svg.png",
"Burkina Faso":"http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Flag_of_Burkina_Faso.svg/200px-Flag_of_Burkina_Faso.svg.png",
"Niger":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Flag_of_Niger.svg/200px-Flag_of_Niger.svg.png",
"Cameroon":"http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Flag_of_Cameroon.svg/200px-Flag_of_Cameroon.svg.png",
"Benin":"http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flag_of_Benin.svg/200px-Flag_of_Benin.svg.png",
"Togo":"http://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Flag_of_Togo.svg/200px-Flag_of_Togo.svg.png",
"Ghana":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Ghana.svg/200px-Flag_of_Ghana.svg.png",
"Chad": "http://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Flag_of_Chad.svg/200px-Flag_of_Chad.svg.png",
"Gabon": "http://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Flag_of_Gabon.svg/200px-Flag_of_Gabon.svg.png",
"Equatorial Guinea": "http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Flag_of_Equatorial_Guinea.svg/200px-Flag_of_Equatorial_Guinea.svg.png",
"Central African Republic": "http://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": "http://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": "http://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, "/mbostock/raw/4090846/world-110m.json")
.defer(d3.tsv, "/mbostock/raw/4090846/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>