xxxxxxxxxx
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<title>市区町村マップ</title>
</head>
<body>
<div class="container"></div>
<script type="text/javascript">
// var mapfilepath = '/sugi2000/raw/560f664f9b32a17b2c4e/japan.topojson';
var mapfilepath = 'japan.topojson';
var csvpath = 'kokusei2015sokuho.csv';
var japan;
var zoom = d3.behavior.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
var w = 960;
var h = 960;
var container = d3.select('.container');
var svg = container.append('svg')
.attr('width', w)
.attr('height', h)
.append("g");
var g = svg.append("g");
svg.call(zoom)
.call(zoom.event);
var domainArr = [0, 200000, 400000, 600000, 800000];
// データの数値から色に変換する関数
var color = d3.scale.linear()
.domain(domainArr)
.range(['red', 'orange', 'yellow', 'cyan', 'blue']);
var updateMap = function() {
g.selectAll('path')
.transition()
.duration(1000)
.style('fill', function(d) {
return color(d.properties['人口']);
});
}
// 凡例を追加
svg.selectAll('rect.legend')
.data(domainArr)
.enter()
.append('rect')
.attr('class', 'legend')
.attr('x', 65)
.attr('y', function(d, i) { return 100 + 20 * i; })
.attr('width', 20)
.attr('height', 20)
.attr('fill', function(d) { return color(d); });
svg.selectAll('text.legend')
.data(domainArr)
.enter()
.append('text')
.attr('x', 60)
.attr('y', function(d, i) { return 100 + 20 * i + 12; })
.attr('font-size', 9)
.attr('text-anchor', 'end')
.text(function(d) { return d + '人'; });
// mapファイルの読み込み
d3.json(mapfilepath, function(error, collection) {
var japan = topojson.feature(collection, collection.objects.japan).features;
// setup map
var projection = d3.geo.mercator()
.scale(1500)
.center([137, 34])
//.center(d3.geo.centroid(collection))
.translate([w / 2, h / 2 - 50]);
var path = d3.geo.path().projection(projection);
g.selectAll('path')
.data(japan)
.enter()
.append('path')
.attr('d', path)
.attr('ken', function(d) {
return d.properties.name_local;
})
.style('fill', function(d, i) {
return 'white';
})
.style('cursor', 'pointer')
.on('mouseover', function(){
var self = d3.select(this);
self.style('fill', 'red');
})
.on('mouseout', function(d, i){
var self = d3.select(this);
self.transition()
.duration(300)
.style('fill', function(d, i) {
return color(d.properties['人口']);
});
})
;
// mapファイルを読み込んだ後にcsvファイルを読み込み
d3.csv(csvpath, function(error, rows) {
// 人口データを追加する
for (var i = 0; i < rows.length; i++) {
var municipality = japan.filter(function(obj) {
return (parseInt(obj.properties.JCODE) === parseInt(rows[i]['_市区町村コード']));
})[0];
console.log('municipality', i, municipality, rows[i]);
if (municipality) {
municipality.properties['人口'] = rows[i]['人口'];
}
}
// データを読み込んだので、マップの色を更新
updateMap();
});
});
// ズーム用関数
function zoomed() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
// blocks公開用の高さ調節
d3.select(self.frameElement).style("height", h + "px");
</script>
</body>
</html>
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v1.min.js