Before react-d3

population.js

var w = 800,
h = 600;

var projection = d3.geo.mercator()
.center([120.979531, 23.978567])
.scale(10000);

var color = d3.scale.quantize()
.domain([0, 1])
.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

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

var svg = d3.select('#content')
	.append('svg')
	.attr('width', w)
	.attr('height', h)
	.attr('viewBox', "0 0 800 600")
	.attr('preserveAspectRatio', 'xMidYMid');

var g = svg.append("g")
	.attr("class", "key")
	.attr("transform", "translate(40,40)");

var year = [];
var district = [];
var districtName =  [];
var townValue = [];

d3.json("population.json", function(error, population_data) {

	for(_key in population_data) {
		// year
		year.push(_key);
	}

	var year_data = population_data[year[0]];

	for(_key_year in year_data) {
		district.push(_key_year);
		// district
		for(_district in year_data[_key_year]) {
			districtName.push(_key_year + _district);
			townValue.push(+year_data[_key_year][_district]);
		}
	}

	d3.json('../../data/taiwan-map/twTown1982.topo.json', function(err, data) {

		var color_scale = d3.scale.linear()
		.domain([0, d3.max(townValue)])

		var x = d3.scale.linear()
		.domain([0, d3.max(townValue)])
		.range([0, 330]);

		var xAxis = d3.svg.axis()
		.scale(x)
		.tickValues(x.domain())
		.orient("bottom");

		var topo = topojson.feature(data, data.objects["twTown1982.geo"]);

		var topomesh = topojson.mesh(data, data.objects["twTown1982.geo"], function(a, b){
			return a !== b;
		});

		topo.features.forEach(function(d, i) {
			if(d.properties.TOWNID === "1605" || d.properties.TOWNID === "1603" ||  d.properties.TOWNID=== "1000128") {
				topo.features.splice(i, 1);
			}
		})

		svg.selectAll('path.town')
			.data(topo.features)
			.enter()
			.append('path')
			.attr('id', function(d) { return d.properties.TOWNNAME; })
			.attr('d', path)
			.attr("class", function(d) {
				var count_district = districtName.indexOf(d.properties.COUNTYNAME.trim() + d.properties.TOWNNAME.trim());
				var color_class = color(color_scale(townValue[count_district]));
				if(count_district >= 0){
					return ("town " + color_class);
				}else {
					return "town RdYlGn";
				}
			})

		svg.append('path')
			.attr('class', 'boundary')
			.datum(topomesh)
			.attr('d', path)
			.style('fill', 'none')
			.style('stroke', "rgba(255,255,255,0.5)")
			.style('stroke-width', '2px');

	})

})