block by dhoboy ff8448ace9d5d567390a

Asia Map

Full Screen

China, Taiwan, Hong Kong, Japan, N. Korea, S. Korea, India, Bhutan, Nepal, Bangladesh, Myanmar, Thailand, Laos, Cambodia, Vietnam each with a different color. Colors by Color Brewer. Map made with d3. Thanks to Mike Bostock for the great Let’s Make a Map tutorial.

index.html

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

.subunit.CHN { fill: #fb8072; }
.subunit.TWN { fill: #8dd3c7; }
.subunit.HKG { fill: #045a8d; }
.subunit.JPN { fill: #b3de69; }
.subunit.KOR { fill: #bc80bd; }
.subunit.IND { fill: #fdb462; }
.subunit.BTN { fill: #ffffb3; }
.subunit.NPL { fill: #80b1d3; }
.subunit.BGD { fill: #d9d9d9; }
.subunit.MMR { fill: #ccebc5; }
.subunit.THA { fill: #7489cf; }
.subunit.KHM { fill: #bebada; }
.subunit.VNM { fill: #df65b0; }
.subunit.LAO { fill: #fccde5; }
.subunit.PRK { fill: #989898; }

</style>
<body>
<script src="//d3js.org/d3.v3.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/topojson.v1.js"></script>
<script>

var width = 1000,
	height = 590;

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

// map projection
var projection = d3.geo.patterson()
	.center([58,54])
    .scale(520)
    .translate([0,0])
    .precision(.1);

// path generator
var path = d3.geo.path()
	.projection(projection);

d3.json("asia.json", function(error, asia) {
  
  var subunits = topojson.feature(asia, asia.objects.subunits);
	
  svg.selectAll(".subunit")
  	  .data(subunits.features)
    .enter()
      .append("path")
      .attr("class", function(d) { return "subunit " + d.id; })
      .attr("d", path);

});

</script>