Mapbox GL JS - Interactive Choropleth Map

▶︎ Data source: http://www.stat.go.jp/data/jinsui/2017np/index.html

<!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>

https://d3js.org/d3.v5.min.js

https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js