Malaysia flag map

Malaysia flag map using d3-composite-projections. The idea is based on this block by Saiful Azfar Ramlee.

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

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://unpkg.com/d3-composite-projections@1.2.0/d3-composite-projections.min.js"></script>
<script>
var width = 960,
    height = 500;

var flags = [{},
              {'name': 'Johor', 'img': "https://upload.wikimedia.org/wikipedia/commons/5/5a/Flag_of_Johor.svg"},
              {'name': 'Kedah', 'img': "https://upload.wikimedia.org/wikipedia/commons/c/cc/Flag_of_Kedah.svg"},
              {'name': 'Kelantan', 'img': "https://upload.wikimedia.org/wikipedia/commons/6/61/Flag_of_Kelantan.svg"},
              {'name': 'Kuala Lumpur', 'img': "https://upload.wikimedia.org/wikipedia/commons/6/64/Flag_of_Kuala_Lumpur%2C_Malaysia.svg"},
              {'name': 'Labuan', 'img': "https://upload.wikimedia.org/wikipedia/commons/0/00/Flag_of_the_Federal_Territories_of_Malaysia.svg"},
              {'name': 'Melaka', 'img': "https://upload.wikimedia.org/wikipedia/commons/0/09/Flag_of_Malacca.svg"},
              {'name': 'Negeri Sembilan', 'img': "https://upload.wikimedia.org/wikipedia/commons/d/db/Flag_of_Negeri_Sembilan.svg"},
              {'name': 'Pahang', 'img': "https://upload.wikimedia.org/wikipedia/commons/a/aa/Flag_of_Pahang.svg"},
              {'name': 'Perak', 'img': "https://upload.wikimedia.org/wikipedia/commons/8/87/Flag_of_Perak.svg"},
              {'name': 'Perlis', 'img': "https://upload.wikimedia.org/wikipedia/commons/a/aa/Flag_of_Perlis.svg"},
              {'name': 'Pulau Pinang', 'img': "https://upload.wikimedia.org/wikipedia/commons/d/d4/Flag_of_Penang_%28Malaysia%29.svg"},
              {'name': 'Putrajaya', 'img': "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Putrajaya.svg"},
              {'name': 'Sabah', 'img': "https://upload.wikimedia.org/wikipedia/commons/b/b5/Flag_of_Sabah.svg"},
              {'name': 'Sarawak', 'img': "https://upload.wikimedia.org/wikipedia/commons/7/7e/Flag_of_Sarawak.svg"},
              {'name': 'Selangor', 'img': "https://upload.wikimedia.org/wikipedia/commons/0/0c/Flag_of_Selangor.svg"},
              {'name': 'Terengganu', 'img': "https://upload.wikimedia.org/wikipedia/commons/6/6b/Flag_of_Terengganu.svg"},
            ]

var projection = d3.geoMercatorMalaysia();
var path = d3.geoPath()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var t = d3.transition();
d3.json("malaysia.json", function(error, malaysia) {
  var states = topojson.feature(malaysia, malaysia.objects.states);
  var land = topojson.feature(malaysia, malaysia.objects.land);
  svg.selectAll(".land")
      .data(land.features)
      .enter()
      .append("path")
      .attr("class", "land")
      .attr("d", path)
      .style("fill", "#aca")
      .style("stroke", "#000")
      .style("stroke-width", "1px");

var statesEnter = svg.selectAll(".state")
    .data(states.features)
    .enter();

statesEnter.append("clipPath")
    .attr("class","mask")
    .attr("id",function(d){return "clip"+d.properties.id;})
    .append("path")
    .attr("d",path);

statesEnter.append("image")
      .attr("xlink:href",function(d){return flags[d.properties.id].img;})
      .attr("x", function(d){return path.bounds(d)[0][0];})
      .attr("y", function(d){return path.bounds(d)[0][1];})
      .attr("width", function(d){var bounds = path.bounds(d); return bounds[1][0] - bounds[0][0];})
      .attr("height", function(d){var bounds = path.bounds(d); return bounds[1][1] - bounds[0][1];})
      .attr("preserveAspectRatio","none")
      .attr("clip-path", function(d){return "url(#clip"+d.properties.id+")";});

statesEnter.append("path")
    .attr("class", "states")
    .attr("d", path)
    .style("stroke", "#000")
    .style("fill", "none")
    .style("stroke-width", "1px")
    ;
  svg
    .append("path")
      .style("fill","none")
      .style("stroke","#000")
      .attr("d", projection.getCompositionBorders());

});

</script>

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

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

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

https://unpkg.com/d3-composite-projections@1.2.0/d3-composite-projections.min.js