xxxxxxxxxx
<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>
<!--
<script src="crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js"></script>
<style src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" />
-->
<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>
<script>
var width = 960,
height = 960;
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