#Japan Map 市区町村境界の日本地図です。
xxxxxxxxxx
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script> <!-- d3.js ライブラリ -->
<script src="https://d3js.org/topojson.v1.min.js"></script> <!-- topojson ライブラリ -->
<body>
<script>
// svgのサイズ(幅と高さ)
var width = 960,
height = 960;
// svgをbody内に追加して、その中にg(グループ)を追加=>変数svgに代入
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
// さらにgを追加
var g = svg.append("g");
// topojsonファイルのアドレスを指定
var mapfilepath = '/sugi2000/raw/f5cb73861573aab98187/japan0001.json';
//var kencsvpath = '/sugi2000/raw/f5cb73861573aab98187/ken.csv';
//var mapfilepath = 'japan0001.json';
// csvファイルのアドレスを指定
var kencsvpath = 'ken.csv';
// ズームの設定(1〜8倍)
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) { // データにproperties.JCODEが存在する場合
return color(+d.properties.JCODE.substr(0, 2) / 47); // JCODEの上位2桁を取り出して47で割った数をもとに色に変換する
} else { // 存在しない場合(北方領土)
return d3.hsl(0, 0, 0); // 黒色
}
};
// マップデータの読み込み
d3.json(mapfilepath, function(error, collection) {
if (error) {
return console.warn(error); // エラーの場合、エラー内容をコンソールに警告表示
}
// マップの設定
var projection = d3.geo.mercator() // メルカトル図法
.scale(1500) // 1500倍拡大
.center(d3.geo.centroid(collection)) // マップの中心点をセンターにする
.translate([width / 2, height / 2 - 50]); // svgの中央やや下へ座標をずらす
//パスの設定
var path = d3.geo.path().projection(projection);
// データからpathの作成
g.selectAll('path')
.data(collection.features) // マップデータのfeaturesをデータに
.enter()
.append('path')
.attr('d', path) // d属性にpathを設定
.attr('JCODE', function(d) {return d.properties.JCODE;}) // JCODE属性の設定
.attr('KENCODE', function(d) { // KENCODE属性の設定
if (d.properties.JCODE) {
return d.properties.JCODE.substr(0, 2);
} else {
return 'null';
}
})
.attr('shikuchoson', function(d) { // shikuchoson属性の設定
return d.properties.SIKUCHOSON;
})
.style('fill', kenColor) // fillスタイル(塗りの色)をkenColorに設定
.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); // 塗りの色を元の色(kenColor)に徐々にもどす
})
;
});
// csvファイルの読み込み
d3.csv(kencsvpath, function(error, dataset) {
// rect の作成
svg.selectAll('rect.ken')
.data(dataset)
.enter()
.append('rect')
.attr('class', 'ken')
.attr('x', 0)
.attr('y', function(d,i){return height / 47 * i; })
.attr('width', 120)
.attr('height', height / 47)
.attr('id', function(d){return d.id;})
.attr('fill', function(d){return color(+d.id / 47);});
// text の作成
svg.selectAll('text.ken')
.data(dataset)
.enter()
.append('text')
.attr('class', 'ken')
.attr('x', 0)
.attr('y', function(d,i){return height / 47 * (i + 1); })
.attr('font-size', 9)
.text(function(d){return d.name;});
});
// ズーム用の関数
function zoomed() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
// blocksプレビュー画面の高さ設定
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
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v1.min.js