▶︎ Data source: http://www.stat.go.jp/data/jinsui/2017np/index.html
Built with blockbuilder.org
xxxxxxxxxx
<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>
https://d3js.org/d3.v5.min.js
https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js