Canada by dhoboy

index.html

<!doctype html>
<meta charset="utf-8">
<style>
.province { fill: #D0D0D0; }
.boundary {
  fill: none;
  stroke: #F0FFFF;
  stroke-width: 1;
}
.Manitoba { fill: #95c2b3; }
.Saskatchewan { fill: #e9b4cb; }
.Alberta { fill: #c8e8c4; }
.British_Columbia { fill: #cab8e5; }
.Nunavut { fill: #e7deb9; }
.Yukon { fill: #9fbbdf; }
.Northwest_Territories { fill: #e2b09e; }
.Québec { fill: #94d1e2; }
.Ontario { fill: #c16788; } 
.Prince_Edward_Island { fill: #d74b41; }
.New_Brunswick { fill: #d8cbce; } 
.Newfoundland_and_Labrador { fill: #b8bd9e; }
.Nova_Scotia { fill: #b0d044; } 
</style>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script>

var width = 960;
var height = 1000;

var projection =  d3.geoAugust()
  .scale(400)
  .rotate([0,20,0])
  .translate([1.45*width, 1.30*height]);

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

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

d3.json("ca.json", function(ca) {
  var provinces = topojson.feature(ca, ca.objects.canada);

  svg.selectAll(".province")
      .data(provinces.features)
    .enter()
      .append("path")
      .attr("class", function(d) {
        if (!d.id) { return "province"; }
        return "province " + d.id.split(" ").join("_");
      }) 
      .attr("d", path);

  // draw province separating lines on top
  svg.append("path")
    .datum(topojson.mesh(ca, ca.objects.canada, function(a, b) { return a !== b; }))
    .attr("d", path)
    .attr("class", "boundary");
});
</script>