▶︎ Data source: http://www.stat.go.jp/data/jinsui/2017np/index.html
Built with blockbuilder.org
# Mapbox GL JS - Interactive Choropleth Map | |
license: mit |
▶︎ Data source: http://www.stat.go.jp/data/jinsui/2017np/index.html
Built with blockbuilder.org
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title>Display a map</title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' /> | |
<style> | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
#map { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
width: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
<script> | |
mapboxgl.accessToken = 'pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2szOWljb210MDJxcjNjcXRwZGF6bmJnMiJ9.gin_FUY4wc61PoNKnUWL5Q'; | |
var map = new mapboxgl.Map({ | |
container: 'map', // container id | |
style: 'mapbox://styles/mapbox/light-v9', // stylesheet location | |
center: [137.6850225, 38.258595], // starting position [lng, lat] | |
zoom: 4 // starting zoom | |
}); | |
var loadFiles = [ | |
d3.json("pref.geojson"), | |
d3.tsv("japan_population.tsv") | |
]; | |
Promise.all(loadFiles).then(function (data) { | |
data[0].features = data[0].features.map(feature => { | |
data[1].forEach(prefData => { | |
if (feature.properties.KEN === prefData['都道府県']) { | |
feature.properties.total = Number(prefData['合計']); | |
feature.properties.male = Number(prefData['男']); | |
feature.properties.female = Number(prefData['女']); | |
feature.properties.genderRatio = parseFloat(prefData['性比']); | |
} | |
}); | |
return feature; | |
}); | |
var margedGeoJSON = data[0]; | |
var thresholdsNum = [75, 80, 85, 90, 95, 100, 105, 10000]; | |
var thresholdsColor = ['#b30000', '#e34a33', '#fc8d59', '#fdcc8a', '#fef0d9', '#ffffff', '#f1eef6', 'black']; | |
var stepsList = thresholdsNum.map((num, i) => { | |
return [num, thresholdsColor[i]]; | |
}); | |
var selectedValue, selectedKEN; | |
map.on('load', function () { | |
map.addSource('pref', { | |
type: 'geojson', | |
data: margedGeoJSON | |
}); | |
map.addLayer({ | |
'id': 'pref', | |
'type': 'fill', | |
'source': 'pref', | |
'paint': { | |
'fill-color': '#088', | |
'fill-opacity': 0.8 | |
}, | |
'paint': { | |
'fill-color': { | |
property: 'genderRatio', | |
stops: stepsList | |
}, | |
'fill-opacity': 0.75 | |
} | |
}); | |
map.on('click', 'pref', function (e) { | |
new mapboxgl.Popup() | |
.setLngLat(e.lngLat) | |
.setHTML(e.features[0].properties.KEN) | |
.addTo(map); | |
var selectedFeature = map.queryRenderedFeatures(e.point, { layers: ["pref"] })[0]; | |
margedGeoJSON.features.forEach(feature => { | |
if (feature.properties.KEN === selectedKEN) { | |
feature.properties.genderRatio = selectedValue; | |
} | |
}) | |
margedGeoJSON.features.forEach(feature => { | |
if(feature.properties.KEN === selectedFeature.properties.KEN) { | |
selectedValue = feature.properties.genderRatio; | |
selectedKEN = feature.properties.KEN; | |
feature.properties.genderRatio = 10000; | |
} | |
}) | |
map.getSource('pref').setData(margedGeoJSON); | |
}); | |
map.on('mouseenter', 'pref', function () { | |
map.getCanvas().style.cursor = 'pointer'; | |
}); | |
map.on('mouseleave', 'pref', function () { | |
map.getCanvas().style.cursor = ''; | |
}); | |
}); | |
function httpGet(theUrl) { | |
var xmlHttp = new XMLHttpRequest(); | |
xmlHttp.open("GET", theUrl, false); | |
xmlHttp.send(null); | |
return xmlHttp.responseText; | |
} | |
}) | |
</script> | |
</body> | |
</html> |
都道府県 | 合計 | 男 | 女 | 性比 | |
---|---|---|---|---|---|
北海道 | 5,292 | 2,494 | 2,797 | 89.2 | |
青森県 | 1,274 | 599 | 675 | 88.7 | |
岩手県 | 1,249 | 602 | 647 | 93.1 | |
宮城県 | 2,305 | 1,127 | 1,178 | 95.7 | |
秋田県 | 992 | 467 | 526 | 88.8 | |
山形県 | 1,095 | 529 | 567 | 93.3 | |
福島県 | 1,871 | 927 | 944 | 98.2 | |
茨城県 | 2,847 | 1,420 | 1,427 | 99.5 | |
栃木県 | 1,930 | 962 | 968 | 99.3 | |
群馬県 | 1,913 | 945 | 969 | 97.5 | |
埼玉県 | 7,174 | 3,582 | 3,592 | 99.7 | |
千葉県 | 6,141 | 3,056 | 3,084 | 99.1 | |
東京都 | 13,273 | 6,538 | 6,735 | 97.1 | |
神奈川県 | 8,989 | 4,486 | 4,502 | 99.6 | |
新潟県 | 2,253 | 1,093 | 1,160 | 94.2 | |
富山県 | 1,043 | 505 | 537 | 94.1 | |
石川県 | 1,136 | 550 | 586 | 94.0 | |
福井県 | 767 | 373 | 394 | 94.7 | |
山梨県 | 811 | 398 | 414 | 96.1 | |
長野県 | 2,047 | 999 | 1,047 | 95.4 | |
岐阜県 | 1,970 | 956 | 1,014 | 94.2 | |
静岡県 | 3,605 | 1,776 | 1,828 | 97.2 | |
愛知県 | 7,328 | 3,668 | 3,659 | 100.2 | |
三重県 | 1,763 | 859 | 904 | 95.0 | |
滋賀県 | 1,390 | 686 | 705 | 97.3 | |
京都府 | 2,551 | 1,219 | 1,331 | 91.6 | |
大阪府 | 8,657 | 4,162 | 4,495 | 92.6 | |
兵庫県 | 5,417 | 2,583 | 2,834 | 91.1 | |
奈良県 | 1,338 | 631 | 707 | 89.2 | |
和歌山県 | 939 | 442 | 497 | 89.0 | |
鳥取県 | 561 | 269 | 293 | 91.8 | |
島根県 | 678 | 326 | 351 | 92.9 | |
岡山県 | 1,888 | 907 | 980 | 92.5 | |
広島県 | 2,789 | 1,352 | 1,438 | 94.0 | |
山口県 | 1,369 | 649 | 720 | 90.1 | |
徳島県 | 739 | 353 | 386 | 91.3 | |
香川県 | 959 | 464 | 494 | 93.9 | |
愛媛県 | 1,354 | 640 | 714 | 89.5 | |
高知県 | 710 | 334 | 376 | 88.9 | |
福岡県 | 5,051 | 2,386 | 2,665 | 89.5 | |
佐賀県 | 819 | 387 | 431 | 89.7 | |
長崎県 | 1,346 | 632 | 714 | 88.6 | |
熊本県 | 1,754 | 828 | 926 | 89.5 | |
大分県 | 1,142 | 541 | 601 | 90.0 | |
宮崎県 | 1,083 | 510 | 573 | 89.0 | |
鹿児島県 | 1,617 | 761 | 856 | 88.9 | |
沖縄県 | 1,429 | 702 | 728 | 96.4 |