ronnywang · December 1, 2012 12:53
diff --git a/bluegreen.js b/bluegreen.js
 var all_data = null;

 var bluegreen_init_data = function(data){
    all_data = [];
    data.forEach(function(d){
        var id;
        if (d['村里']) {
            id = d['#縣市'] + '-' + d['鄉鎮'] + '-' + d['村里'];
        } else if (d['鄉鎮']) {
            id = d['#縣市'] + '-' + d['鄉鎮'];
        } else {
            id = d['#縣市'];
        }
        all_data[id] = d;
    });
 };

 var bluegreen_style_cb = function(d) {
    if ('undefined' == typeof(all_data[d.id])) {
        console.log('Unknwon id: ' + d.id);
        return 'fill:white';
    }
    var rate = parseInt(all_data[d.id]['1得票']) / (parseInt(all_data[d.id]['1得票']) + parseInt(all_data[d.id]['2得票']));
    var rgb = [];
    var base = 255;
    if (rate > 0.5) { // 綠
        color = Math.floor(2.0 * base * (1 - rate));
        rgb = [color, base, color];
    } else if (rate < 0.5) { // 藍
        color = Math.floor(2.0 * base * (rate));
        rgb = [color, color, base];
    } else {
        rgb = [base, base, base];
    }
    return 'fill:rgb(' + rgb.join(',') + ')';
 };

 var bluegreen_mouseover_cb = function(e){
    var data = all_data[e.id];
    if ('undefined' == typeof(data)) {
        $('#info').text('不知道的鄉鎮: ' + e.id);
        return;
    }
    var body = '';
    for (var i in data) {
        if ('' !== data[i]) {
            body += i + ': ' + data[i] + '<br>';
        }
    }
    $('#info').html(body);
 };
diff --git a/count.csv b/count.csv
diff --git a/town.html b/town.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <style>

 .villages {
  stroke: #fff;
  stroke-width: .5px;
  stroke-opacity: .5;
 }

 .county {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
 }

 .white{
 	fill: none;
  pointer-events: all;
 }

 </style>
 </head>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/queue.v1.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script src="twmap.js"></script>
 <script src="bluegreen.js"></script>
 <div id="info" style="position: absolute; left: 600px; top: 0px"></div>
 <script><!--
 twmap('village.json', 'county.json', 'count.csv', {
    init_data: bluegreen_init_data,
    style_cb: bluegreen_style_cb,
    mouseover_cb: bluegreen_mouseover_cb
 });
 //--></script>
 </body>
 </html>
diff --git a/twmap.js b/twmap.js
 var width = 960,
    height = 600;
 var centered;

 var projection = d3.geo.mercator().scale(50000).translate([-16500, 3650]);
 var path = d3.geo.path().projection(projection);

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

 svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr('style', 'fill: white')
    .on("click", click_cb);

 var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")").append("g");

 var ready = function(error, villages, data) {
    if ('undefined' !== typeof(options.init_data)) {
        options.init_data(data);
    }

    var g_dom = g
        .attr("class", "villages")
        .selectAll("path")
        .data(villages.features, function(d){ return d.id; })
        .enter().append("path")
        .attr("d", path)
        .on('click', click_cb);

    if ('undefined' !== typeof(options.mouseover_cb)) {
        g_dom.on('mouseover', options.mouseover_cb);
    }
    if ('undefined' !== typeof(options.style_cb)) {
        g_dom.attr('style', options.style_cb);
    }
 }

 var loaded = [];

 var click_cb = function(d){
    if (d.id.split('-').length < 3 && 'undefined' === typeof(loaded[d.id])) {
      loaded[d.id] = true;
      queue()
          .defer(d3.json, 'map-data/' + d.id + '.json')
          .await(function(error, sub_polygon){
              if (!sub_polygon) {
                  return;
              }
              var g_dom = g
                  .selectAll('path')
                  .data(sub_polygon.features, function(d){ return d.id; })
                  .enter().append("path")
                  .attr("d", path)
                  .on('click', click_cb)
              ;
              if ('undefined' !== typeof(options.mouseover_cb)) {
                  g_dom.on('mouseover', options.mouseover_cb);
              }
              if ('undefined' !== typeof(options.style_cb)) {
                  g_dom.attr('style', options.style_cb);
              }
          });
    
  }
  var x = 0,
      y = 0,
      k = 1;

  if (d && centered !== d) {
    var centroid = path.centroid(d);
    x = -centroid[0];
    y = -centroid[1];
    k = 4;
    centered = d;
    $('#zoom-info').html(d.id);
  } else {
    $('#zoom-info').html('');
    centered = null;
  }

  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });

  g.transition()
      .duration(1000)
      .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
      .style("stroke-width", 1.5 / k + "px");
 };

 var load_village = function(){
    queue()
        .defer(d3.json, 'village.json')
        .await(function(error, sub_polygon){
            if (!sub_polygon) {
                return;
            }
            var g_dom = g
                .selectAll('path')
                .data(sub_polygon.features, function(d){ return d.id; })
                .enter().append("path")
                .attr("d", path)
                .on('click', click_cb)
            ;
            if ('undefined' !== typeof(options.mouseover_cb)) {
                g_dom.on('mouseover', options.mouseover_cb);
            }
            if ('undefined' !== typeof(options.style_cb)) {
                g_dom.attr('style', options.style_cb);
            }
        });
 };

 var options = {};
 var twmap = function(geo_map1, geo_map2, data_csv, opt){
    options = opt;
    queue()
        .defer(d3.json, geo_map1)
        .defer(d3.csv, data_csv)
        .await(ready);
 };
diff --git a/village.json b/village.json
	var all_data = null;

	var bluegreen_init_data = function(data){
	all_data = [];
	data.forEach(function(d){
	var id;
	if (d['村里']) {
	id = d['#縣市'] + '-' + d['鄉鎮'] + '-' + d['村里'];
	} else if (d['鄉鎮']) {
	id = d['#縣市'] + '-' + d['鄉鎮'];
	} else {
	id = d['#縣市'];
	}
	all_data[id] = d;
	});
	};

	var bluegreen_style_cb = function(d) {
	if ('undefined' == typeof(all_data[d.id])) {
	console.log('Unknwon id: ' + d.id);
	return 'fill:white';
	}
	var rate = parseInt(all_data[d.id]['1得票']) / (parseInt(all_data[d.id]['1得票']) + parseInt(all_data[d.id]['2得票']));
	var rgb = [];
	var base = 255;
	if (rate > 0.5) { // 綠
	color = Math.floor(2.0 * base * (1 - rate));
	rgb = [color, base, color];
	} else if (rate < 0.5) { // 藍
	color = Math.floor(2.0 * base * (rate));
	rgb = [color, color, base];
	} else {
	rgb = [base, base, base];
	}
	return 'fill:rgb(' + rgb.join(',') + ')';
	};

	var bluegreen_mouseover_cb = function(e){
	var data = all_data[e.id];
	if ('undefined' == typeof(data)) {
	$('#info').text('不知道的鄉鎮: ' + e.id);
	return;
	}
	var body = '';
	for (var i in data) {
	if ('' !== data[i]) {
	body += i + ': ' + data[i] + '<br>';
	}
	}
	$('#info').html(body);
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>

	.villages {
	stroke: #fff;
	stroke-width: .5px;
	stroke-opacity: .5;
	}

	.county {
	fill: none;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	.white{
	fill: none;
	pointer-events: all;
	}

	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="twmap.js"></script>
	<script src="bluegreen.js"></script>
	<div id="info" style="position: absolute; left: 600px; top: 0px"></div>
	<script><!--
	twmap('village.json', 'county.json', 'count.csv', {
	init_data: bluegreen_init_data,
	style_cb: bluegreen_style_cb,
	mouseover_cb: bluegreen_mouseover_cb
	});
	//--></script>
	</body>
	</html>
	var width = 960,
	height = 600;
	var centered;

	var projection = d3.geo.mercator().scale(50000).translate([-16500, 3650]);
	var path = d3.geo.path().projection(projection);

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

	svg.append("rect")
	.attr("width", width)
	.attr("height", height)
	.attr('style', 'fill: white')
	.on("click", click_cb);

	var g = svg.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")").append("g");

	var ready = function(error, villages, data) {
	if ('undefined' !== typeof(options.init_data)) {
	options.init_data(data);
	}

	var g_dom = g
	.attr("class", "villages")
	.selectAll("path")
	.data(villages.features, function(d){ return d.id; })
	.enter().append("path")
	.attr("d", path)
	.on('click', click_cb);

	if ('undefined' !== typeof(options.mouseover_cb)) {
	g_dom.on('mouseover', options.mouseover_cb);
	}
	if ('undefined' !== typeof(options.style_cb)) {
	g_dom.attr('style', options.style_cb);
	}
	}

	var loaded = [];

	var click_cb = function(d){
	if (d.id.split('-').length < 3 && 'undefined' === typeof(loaded[d.id])) {
	loaded[d.id] = true;
	queue()
	.defer(d3.json, 'map-data/' + d.id + '.json')
	.await(function(error, sub_polygon){
	if (!sub_polygon) {
	return;
	}
	var g_dom = g
	.selectAll('path')
	.data(sub_polygon.features, function(d){ return d.id; })
	.enter().append("path")
	.attr("d", path)
	.on('click', click_cb)
	;
	if ('undefined' !== typeof(options.mouseover_cb)) {
	g_dom.on('mouseover', options.mouseover_cb);
	}
	if ('undefined' !== typeof(options.style_cb)) {
	g_dom.attr('style', options.style_cb);
	}
	});

	}
	var x = 0,
	y = 0,
	k = 1;

	if (d && centered !== d) {
	var centroid = path.centroid(d);
	x = -centroid[0];
	y = -centroid[1];
	k = 4;
	centered = d;
	$('#zoom-info').html(d.id);
	} else {
	$('#zoom-info').html('');
	centered = null;
	}

	g.selectAll("path")
	.classed("active", centered && function(d) { return d === centered; });

	g.transition()
	.duration(1000)
	.attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
	.style("stroke-width", 1.5 / k + "px");
	};

	var load_village = function(){
	queue()
	.defer(d3.json, 'village.json')
	.await(function(error, sub_polygon){
	if (!sub_polygon) {
	return;
	}
	var g_dom = g
	.selectAll('path')
	.data(sub_polygon.features, function(d){ return d.id; })
	.enter().append("path")
	.attr("d", path)
	.on('click', click_cb)
	;
	if ('undefined' !== typeof(options.mouseover_cb)) {
	g_dom.on('mouseover', options.mouseover_cb);
	}
	if ('undefined' !== typeof(options.style_cb)) {
	g_dom.attr('style', options.style_cb);
	}
	});
	};

	var options = {};
	var twmap = function(geo_map1, geo_map2, data_csv, opt){
	options = opt;
	queue()
	.defer(d3.json, geo_map1)
	.defer(d3.csv, data_csv)
	.await(ready);
	};