2015-01-11 Saga Gubernatorial Election

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>

<style type="text/css">
.label {
	fill: #333;
	font-size: 9px;
	font-weight: bold;
	text-anchor: middle;
}
svg text.legend, text.area-desc {
	font-size: 11px;
	font-weight: bold;
}
svg text.result {
	font-size: 11px;
	fill: #666;
}
svg path.map-path {
	stroke: #fff;
}
svg text::selection { background: none; }
</style>

<body>

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

var g = svg.append("g");

//var mapfilepath = '/sugi2000/raw/f5cb73861573aab98187/japan0001.json';
//var kencsvpath = '/sugi2000/raw/f5cb73861573aab98187/ken.csv';
var mapfilepath = 'saga.topojson';
var csvpath = 'saga.csv';
var saga;
var votes = [];

var candidates = ['山口　祥義','樋渡　啓祐','島谷　幸宏','飯盛　良隆'];
var results = [182795, 143720, 32844, 6951];
var resultSizes = [];
for (var i = 0; i < results.length; i++) {
	resultSizes.push(Math.sqrt(results[i]) * 0.2);
}

/*
var shareColor = function(d, candidate) {
	var total =
}
*/

/*
var zoom = d3.behavior.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoomed);

svg.call(zoom)
    .call(zoom.event);
*/

//var color = d3.scale.linear().range(["#ff4400", "#00cc66"]);
var color = d3.scale.linear().domain([0, 0.25, 0.5, 0.75, 1]).range(["#0000ee", "#00ee00", "#eeeeee", "#eeee00", "#ee0000"]);

var kenColor = function(d) {
	if (d.properties.JCODE) {
	  return color(+d.properties.JCODE.substr(0, 2) / 47);
		} else {
	  	return d3.hsl(0, 0, 0)
		}
	};

var color = d3.scale.ordinal()
	.range(['hsla(0, 70%, 50%, 1.0)', 'hsla(210, 70%, 50%, 1.0)', 'hsla(60, 70%, 50%, 1.0)', 'hsla(90, 0%, 50%, 1.0)']);

g.selectAll('circle.legend')
	.data(candidates)
	.enter()
	.append('circle')
	.attr('class', 'legend')
	.attr('cx', 100)
	.attr('cy', function(d,i) {
		var margin = 100;
		for (var j = 0; j < i; j++) {
			margin += resultSizes[j];
		}
		return margin;
	})
	.attr('r', 0)
	// .attr('r', function(d,i) { return resultSizes[i] / 2; })
	.style('fill', function(d) { return color(d); });

g.selectAll('circle.legend')
	.transition()
	.duration(2500)
	.ease('elastic')
	.delay(function(d,i){return i  * 100;})
	.attr('r', function(d,i) { return resultSizes[i] / 2; });

g.selectAll('text.legend')
	.data(candidates)
	.enter()
	.append('text')
	.attr('class', 'legend')
	.attr('x', 150)
	.attr('y', function(d,i) {
		var margin = 100;
		for (var j = 0; j < i; j++) {
			margin += resultSizes[j];
		}
		return margin;
	})
	.text(function(d){ return d;});

g.selectAll('text.result')
	.data(results)
	.enter()
	.append('text')
	.attr('class', 'result')
	.attr('x', 150)
	.attr('y', function(d,i) {
		var margin = 100;
		for (var j = 0; j < i; j++) {
			margin += resultSizes[j];
		}
		return margin + 12;
	})
	.text(function(d){ return d.toLocaleString() + '票';});

var areaColors = ['hsla(0, 70%, 90%, 1.0)', 'hsla(210, 70%, 90%, 1.0)'];

g.selectAll('rect.legend')
	.data([0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,1, 1,1,1,1,1])
	.enter()
	.append('rect')
	.attr('class', 'legend')
	.attr('x', function(d, i) { return 50 + (i % 5) * 25; })
	.attr('y', function(d, i) { return 400 + Math.floor(i / 5) * 25; })
	.attr('width', 0)
	.attr('height', 0)
	// .attr('width', 25)
	// .attr('height', 25)
	.style('stroke', '#fff')
	.style('fill', 'hsla(0, 0%, 50%, 1.0)');
	// .style('fill', function(d) { return areaColors[d]; });

g.selectAll('rect.legend')
	.transition()
	.duration(500)
	.delay(function(d,i){return i*50;})
	.attr({
		width: 25,
		height: 25,
	})
	.style('fill', function(d) { return areaColors[d]; });

g.append('text')
	.attr('class', 'area-desc')
	.attr('x', 50)
	.attr('y', 395)
	.style('fill', color(0))
	.text('山口候補が最多得票の市町');

g.append('text')
	.attr('class', 'area-desc')
	.attr('x', 50)
	.attr('y', 515)
	.style('fill', color(1))
	.text('樋渡候補が最多得票の市町');

queue(1)
	.defer(d3.json, mapfilepath)
	.defer(d3.csv, csvpath)
	.await(ready);

function ready(error, map, rows) {
	if (error) {
		return console.warn(error);
	}
	renderMap(map);
	renderRows(rows);
	updateMap(candidates[0]);
}

function renderMap(map) {
    // setup map
	saga = topojson.feature(map, map.objects.saga).features;
	//console.log(saga);

updateMap(saga);
}

function updateMap(candidate) {
	console.log(candidate);

var projection = d3.geo.mercator()
                       //.scale(1500)
                       .center([130,33.2])
                       .scale(50000)
                       //.center(d3.geo.centroid(saga))
                       .translate([width / 2, height / 2]);

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

var update = g.selectAll('path').data(saga)
    var enter = update.enter();

for (var i = 0; i < candidates.length; i++) {
	    update.attr('candidate-' + (i+1), function(d){
		    return d.properties[candidates[i]];
			});
		}

enter
    	.append('path')
			.attr('class', 'map-path')
			.attr('d', path)
      .attr('JCODE', function(d) {return d.properties.JCODE;})
      .attr('KENCODE', function(d) {
	      if (d.properties.JCODE) {
			      return d.properties.JCODE.substr(0, 2);
		      } else {
			      return 'null';
		      }
		})
	  .attr('shikuchoson', function(d) {
			return d.properties.SIKUCHOSON;
	  })
      .style('fill', '#eee')
      .style('cursor', 'pointer')
      /*.on('mouseover', function(){
      	var self = d3.select(this);
      	self.style('fill', 'red');
      })
      .on('mouseout', function(){
      	var self = d3.select(this);
      	self.transition()
      	  .duration(300)
      	  .style('fill', kenColor);
      })*/
      ;

update
    	.transition()
    	.duration(300)
    	.style('fill', function(d) {
				if (+d.properties[candidates[0]] > +d.properties[candidates[1]]) {
					return areaColors[0];
				} else {
					return areaColors[1];
				}
				color = d3.scale.linear().domain([0, 100000]).range(['#f8f8f8', '#ff0000']);
				console.log(d.properties[candidate]);
				return color(+d.properties[candidate]);
    	});

var centroids = [];
			for (var i = 0; i < saga.length; i++) {
				centroids.push(path.centroid(saga[i]));
				if (saga[i].properties.SIKUCHOSON === 'みやき町') {
					centroids[centroids.length - 1][1] -= 20; // offset y
				}
			}
			console.log(centroids);

g.selectAll('text.label')
		.data(saga)
		.enter()
		.append('text')
		.attr('class', function(d) { return 'label ' + d.properties.JCODE; })
		.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
		.attr('dy', function(d) {
			if (d.properties.SIKUCHOSON === 'みやき町') {
				return '-2em';
			} else {
				return '.35em';
			}
		})
		.attr('pointer-events', 'none')
		.text(function(d) { return d.properties.SIKUCHOSON; });

for (var i = 0; i < votes.length; i++) {
			var color = d3.scale.ordinal()
				.range(['hsla(0, 70%, 50%, 0.75)', 'hsla(210, 70%, 50%, 0.75)', 'hsla(60, 70%, 50%, 0.75)', 'hsla(90, 0%, 50%, 0.75)']);
			var entries = d3.entries(votes[i]);
			entries.shift(); // remove first town-name
			console.log(entries);
			var totalVotes = 0;
			for (var j = 0; j < entries.length; j++) {
				totalVotes += +entries[j].value;
			}
			var radius = Math.sqrt(totalVotes) * 0.25;
			var arc = d3.svg.arc()
				.outerRadius(radius)
				.innerRadius(radius * 0.5);

var pie = d3.layout.pie()
				.sort(null)
				.value(function(d) { return +d.value; });

var garc = g.selectAll('g.arc-' + i)
				.data(pie(entries))
				.enter()
				.append('g')
				.attr('class', function(d) { return "arc arc-" + i; })
				.attr("transform", 'translate(' + centroids[i] + ')');

garc.append('path')
				.attr('d', arc)
				.style('fill', function(d) { return color(+d.value); });
		}
	}

function renderRows(rows) {
	votes = rows;
	console.log(votes);

// add properties
	for (var i = 0; i < rows.length; i++) {
		//console.log(rows[i].市町, saga[i].properties.SIKUCHOSON);
		if (rows[i]['市町'] === saga[i].properties.SIKUCHOSON) {
			for (var j = 0; j < candidates.length; j++) {
				saga[i].properties[candidates[j]] = rows[i][candidates[j]];
			}
		}
	}

}

function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

d3.select(self.frameElement).style("height", height + "px");

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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

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

Modified http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js to a secure url

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

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

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

https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js