東京都23区のポリゴンをクリックして、レーダーチャートで人口データを確認

完成画面

東京都23区（市区町村レベル）のポリゴンデータについて

ポリゴンデータの詳細が気になる方は以下の記事で確認できます。

人口データについて

令和2年国勢調査結果の人口総数、外国人人口、65歳以上人口、15歳未満人口、男性人口、女性人口を使用しています。
今回使用した東京都23区ポリゴンおよび人口総数データは、TerraMap APIからレスポンスされたものです。

コードについて

地図表示

地図はOSM、地図ライブラリはLeafletを使用し、TerraMap APIからレスポンスされたGeoJSONファイルを読み込んで、マップ上にポリゴンを表示します。

let map;
let geojsonData;

async function initMap() {
    map = L.map('map').setView([35.68437, 139.75247], 10);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    try {
        const response = await fetch("area.json");
        geojsonData = await response.json();

        L.geoJSON(geojsonData, {
            style: {
                fillColor: "#2196F3",
                fillOpacity: 0.4,
                color: "#1565C0",
                weight: 2
            },
            onEachFeature: (feature, layer) => {
                layer.on('click', () => {
                    const districtName = feature.properties.points[0][1];
                    createRadarChart(districtName, feature.properties.data);
                });
            }
        }).addTo(map);

    } catch (error) {
        console.error("GeoJSONの読み込みに失敗しました:", error);
    }
}

initMap();

JSONファイルの抜粋は以下になります。

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"area":{"area":11.397688758847336,"ratio_area":[11.397688758847336],"ratio":[1.0]},"data":[{"is_authorized":true,"ratio_value":["66680"],"stat_item_id":15222,"stat_id":"001012000","value":"66680"},{"is_authorized":true,"ratio_value":["33637"],"stat_item_id":15223,"stat_id":"001012000","value":"33637"},{"is_authorized":true,"ratio_value":["33043"],"stat_item_id":15224,"stat_id":"001012000","value":"33043"},{"is_authorized":true,"ratio_value":["2724"],"stat_item_id":15225,"stat_id":"001012000","value":"2724"},{"is_authorized":true,"ratio_value":["8976"],"stat_item_id":15249,"stat_id":"001012000","value":"8976"},{"is_authorized":true,"ratio_value":["10852"],"stat_item_id":15251,"stat_id":"001012000","value":"10852"}],"point_coordinates":[139.75019,35.68687],"geocode":"13101","points":[["東京都","千代田区"]]},"geometry":{"type":"MultiPolygon","coordinates":[[[[139.748974398,35.670568286],[139.748956569,35.670558464],[139.748767412,35.670419323],[139.747776448,35.669675453],[139.747489331,35.669459902],[139.747440204,35.669489765],[139.747248949,35.669606105],[139.747135664,35.669674995],[139.746952783,35.66978623],[139.74642375,35.670156089],[139.746139025,35.670335906],[139.745943398,35.670376288],[139.744950931,35.670581231],[139.74498423,35.670773779],[139.744996105,35.670842418],[139.744957161,35.670908648],[139.743928574,35.671085561],[139.743294568,35.67122255],[139.743091411,35.671303486],[139.743021886,35.671331214],[139.742511374,35.671618845],[139.741796123,35.672108677],[139.741677371,35.672179147],[139.741458507,35.672281999],[139.741424362,35.672294159],[139.741345345,35.672322266],[139.741166655,35.67244012],[139.739822965,35.673303873],[139.739324171,35.673603686],[139.739119732,35.673726194],[139.738895117,35.673829929],[139.738834717,35.673857795],[139.738768281,35.674035448],[139.738585986,35.674522821],[139.738556751,35.674595116],[139.738214713,35.675441114],[139.738113667,35.675563215],[139.737801983,35.67593985],[139.73752033,35.676283384],[139.737266904,35.676702817],[139.737253685,35.676748964],[139.737163446,35.677176584],[139.737128366,35.677300809],[139.737022063,35.677575155],[139.736997232,35.677679317],[139.737036298,35.677877224],[139.737076519,35.677982539],[139.737131867,35.678086698],[139.736971906,35.678465851],[139.736999464,35.678490587],[139.73691237,35.678704131],[139.736901461,35.67886884],[139.736272595,35.678839006],[139.736045616,35.678823545],[139.735351651,35.678787733],[139.735076612,35.678794232],[139.734742668,35.678812133],[139.734371742,35.678864576],[139.734046384,35.678901978],[139.733640504,35.678986609],[139.733463897,35.679082901],[139.733422911,35.679109808],[139.733311985,35.679236393],[139.73317482,35.679532532],[139.733081151,35.679785229],[139.733025889,35.679934294],[139.732884882,35.680254939],[139.732687715,35.680542436],[139.732600404,35.680634339],[139.732425697,35.680776828],[139.732031121,35.681113203],[139.731529053,35.681550901],[139.731504318,35.681540704],[139.731312427,35.681717933],[139.731262585,35.681801859],[139.731121316,35.681979581],[139.730754265,35.682683365],[139.730696622,35.682809896],[139.730356211,35.683439399],[139.73026011,35.683617123],[139.729885672,35.684540603],[139.73010967,35.68496725],[139.730163906,35.685144823],[139.730182201,35.685379263],[139.730264368,35.685644751],[139.730457983,35.686307205],[139.730470931,35.686351437],[139.730468326,35.686832792],[139.730519917,35.68733352],[139.730535063,35.687384588],[139.730847544,35.688437125],[139.731294621,35.689320881],[139.731278685,35.689328963],[139.731559847,35.689492858],[139.731621236,35.689528642],[139.733150031,35.69046453],[139.734227303,35.691153623],[139.735282471,35.691800197],[139.735390303,35.691856865],[139.735550501,35.691941046],[139.735857249,35.692132763],[139.73601325,35.692222675],[139.736463938,35.692509149],[139.737026506,35.692913664],[139.737363654,35.693190606],[139.737500016,35.693295606],[139.73776664,35.693562291],[139.738019903,35.693888001],[139.738246832,35.694129504],[139.739017724,35.695085423],[139.73906162,35.695176395],[139.739136308,35.695261875],[139.739141246,35.695267793],[139.739260418,35.695423831],[139.739547434,35.695849805],[139.739849161,35.696236889],[139.740124499,35.696560647],[139.74025133,35.696686091],[139.740376418,35.696809808],[139.740512564,35.696964624],[139.740675868,35.697177912],[139.741476739,35.698181358],[139.741564058,35.698299377],[139.741937136,35.698759575],[139.742153486,35.699038487],[139.742591626,35.699579574],[139.742842528,35.699894249],[139.743137632,35.700252169],[139.743309525,35.700193427],[139.743429573,35.700136828],[139.743834518,35.700701044],[139.744209393,35.701253758],[139.744281123,35.701342712],[139.744208111,35.701392101],[139.744280589,35.701459052],[139.744157374,35.701529026],[139.744095406,35.701468352],[139.743858948,35.701628306],[139.743904034,35.701683378],[139.743857001,35.701709814],[139.743970545,35.701815847],[139.743836261,35.701923001],[139.744203721,35.702246808],[139.744422018,35.702445971],[139.744487531,35.70250232],[139.74489257,35.702388418],[139.744899606,35.702386437],[139.744984054,35.702440439],[139.745116628,35.702549717],[139.745048149,35.702686495],[139.744808102,35.703119045],[139.744786043,35.703225751],[139.744722167,35.703441185],[139.744716193,35.703502971],[139.744819357,35.703371473],[139.744945901,35.703254794],[139.744960152,35.703241654],[139.745123576,35.703142938],[139.745282103,35.703077982],[139.745482172,35.703025914],[139.745715709,35.702995867],[139.745875342,35.70299148],[139.746032531,35.703002861],[139.746231154,35.703020399],[139.746684409,35.703106393],[139.746927254,35.703132336],[139.747212929,35.703142123],[139.747425935,35.703143609],[139.75032218,35.703089165],[139.750390845,35.703079279],[139.750448702,35.702932604],[139.75044659,35.702686132],[139.750594669,35.702661726],[139.750846893,35.702638064],[139.750845872,35.702628735],[139.751842592,35.702553708],[139.75189845,35.702549735],[139.752903845,35.702477949],[139.754486961,35.702282668],[139.755234257,35.702116255],[139.755490206,35.702063818],[139.755759194,35.702008712],[139.756603846,35.701801026],[139.756876117,35.701725459],[139.757633497,35.701574532],[139.757692107,35.701572811],[139.758632896,35.701577481],[139.759579979,35.701585819],[139.760116249,35.701592621],[139.760751262,35.701591853],[139.761070129,35.701570865],[139.761099604,35.701568927],[139.761582909,35.701498481],[139.761848001,35.701436074],[139.762076086,35.701335547],[139.762223769,35.701233579],[139.762271387,35.701200701],[139.762287364,35.701224902],[139.76249269,35.701041653],[139.76269147,35.700792134],[139.76278226,35.700654064],[139.762944592,35.700501488],[139.763340813,35.700300741],[139.763557283,35.70021697],[139.763834295,35.70012107],[139.764058651,35.700138076],[139.764509147,35.700012812],[139.765003836,35.699884689],[139.76539891,35.699780259],[139.765407394,35.699778016],[139.765522549,35.699745827],[139.766554628,35.699481003],[139.766650633,35.69971591],[139.766997526,35.699609197],[139.767149488,35.699890753],[139.767261364,35.700097526],[139.767595556,35.699926349],[139.767547992,35.699851708],[139.768308896,35.699497952],[139.768430474,35.69980093],[139.768443307,35.699801073],[139.768586347,35.699802916],[139.76859995,35.699856729],[139.768615035,35.699978204],[139.768614034,35.700083167],[139.768447859,35.700075642],[139.768229825,35.700280691],[139.768021725,35.700496062],[139.768051317,35.70070614],[139.768024521,35.700874215],[139.767991576,35.700892681],[139.767914157,35.700823911],[139.767753525,35.700908821],[139.767455052,35.701066641],[139.767339007,35.701127985],[139.767162228,35.700966064],[139.767083582,35.70102781],[139.767073159,35.701036009],[139.766944464,35.701100823],[139.766973701,35.701290552],[139.766179329,35.701773538],[139.766141883,35.701796304],[139.766301425,35.702147637],[139.766421426,35.702454773],[139.766461686,35.702557815],[139.766492412,35.702559176],[139.766607167,35.702529873],[139.766634947,35.702462529],[139.767381303,35.702543194],[139.767385908,35.702543682],[139.768122814,35.702620351],[139.768146432,35.702643043],[139.768144492,35.702858596],[139.768061498,35.702859991],[139.768057289,35.702886894],[139.767994382,35.703289267],[139.767992679,35.70331585],[139.76827364,35.70333896],[139.768453787,35.70335378],[139.768463021,35.703352829],[139.768748977,35.703323553],[139.769059979,35.703291713],[139.769083377,35.703288915],[139.769231586,35.703271103],[139.769319296,35.703278755],[139.769353421,35.703388562],[139.769423134,35.703686403],[139.769661316,35.703624562],[139.769740946,35.703671007],[139.769919055,35.705195307],[139.769937664,35.705215806],[139.771996266,35.705084114],[139.772001743,35.705083835],[139.773252756,35.704987848],[139.773254166,35.704978557],[139.773088025,35.703422402],[139.773022897,35.70285538],[139.773718934,35.702800273],[139.773711657,35.702778511],[139.773492375,35.702122475],[139.773384859,35.701745929],[139.773383341,35.70174153],[139.774497844,35.701662399],[139.774538439,35.701660481],[139.775066013,35.70163556],[139.775099255,35.701632341],[139.775593988,35.701585674],[139.775529708,35.700978913],[139.775491535,35.700573593],[139.776957746,35.70046701],[139.780538945,35.700191779],[139.780380092,35.699149929],[139.780307469,35.698673614],[139.780172344,35.697888627],[139.781752102,35.697724149],[139.782827476,35.69763647],[139.782751105,35.696636028],[139.78275003,35.696617019],[139.782723741,35.69618101],[139.782671659,35.696187251],[139.781746231,35.696298218],[139.78171164,35.695820695],[139.781708555,35.695788724],[139.7816551,35.695234676],[139.782878786,35.695142139],[139.782872716,35.695103687],[139.782807783,35.694691636],[139.782748114,35.694648624],[139.782211656,35.694261899],[139.782204278,35.69425654],[139.781181435,35.693514553],[139.781162941,35.693501123],[139.780433173,35.692956468],[139.780392574,35.69292902],[139.780292923,35.692861618],[139.779952382,35.693190781],[139.7797715,35.693064823],[139.779547958,35.692909139],[139.778773083,35.692334371],[139.778711158,35.692306673],[139.777557961,35.691839575],[139.777540593,35.691832597],[139.776613575,35.691454776],[139.7765931,35.691446672],[139.775215476,35.690972331],[139.775079151,35.690925159],[139.773830309,35.690492943],[139.773152279,35.690257927],[139.773121352,35.690247208],[139.772383066,35.690018712],[139.772367563,35.690013911],[139.771561147,35.689747312],[139.771052112,35.689573925],[139.771042878,35.689570781],[139.770318849,35.689337149],[139.770171182,35.689290973],[139.769654811,35.689152539],[139.769640664,35.68912433],[139.768809592,35.688841149],[139.768798402,35.688837341],[139.768131263,35.688602769],[139.768138662,35.688594987],[139.768389038,35.688541149],[139.768410352,35.688446696],[139.76859014,35.688199827],[139.769073561,35.687766517],[139.769516853,35.687293318],[139.769575953,35.687223356],[139.770271997,35.686394428],[139.770433301,35.686144239],[139.770453087,35.686100062],[139.770811611,35.685299013],[139.770814451,35.685292678],[139.770924905,35.685068762],[139.770965113,35.68483612],[139.770912047,35.684633357],[139.770784358,35.684229677],[139.770538566,35.683686374],[139.770523002,35.683651958],[139.770091934,35.68272533],[139.769751188,35.682069475],[139.769429585,35.681459717],[139.769326985,35.681290546],[139.768762447,35.680490773],[139.767990507,35.679313789],[139.767113673,35.677881393],[139.766698821,35.677306186],[139.766641328,35.677226474],[139.765748376,35.675962372],[139.765614707,35.675762047],[139.765598009,35.675737019],[139.765271796,35.67526375],[139.765244213,35.675223633],[139.764718626,35.674458792],[139.764663548,35.674377699],[139.764164176,35.673642664],[139.764141548,35.673614976],[139.764054711,35.67350873],[139.76393036,35.67339493],[139.763805845,35.673317685],[139.763727356,35.673288131],[139.763538901,35.673217177],[139.762678126,35.672968197],[139.762662145,35.672964247],[139.762661728,35.672964143],[139.760910232,35.672532625],[139.760773572,35.672449103],[139.76067947,35.672369294],[139.760512771,35.672146247],[139.76047176,35.672052802],[139.760468687,35.672047205],[139.760155854,35.671479116],[139.759546545,35.670372662],[139.759166771,35.66968299],[139.759147359,35.669647732],[139.759063152,35.669494802],[139.759015648,35.669408538],[139.758840143,35.669133231],[139.758724476,35.668904085],[139.75863544,35.668526373],[139.758499477,35.668577804],[139.758487661,35.668581854],[139.755457243,35.669563332],[139.755430622,35.669572652],[139.753947181,35.670087782],[139.752044521,35.670624912],[139.751768463,35.670118653],[139.749613194,35.670846162],[139.749492717,35.670853791],[139.748974398,35.670568286]]]]}},{"type":"Feature","properties":{"area":{"area":9.016362982509676,"ratio_area":[9.016362982509676],"ratio":[1.0]},"data":[{"is_authorized":true,"ratio_value":["169179"],"stat_item_id":15222,"stat_id":"001012000","value":"169179"},{"is_authorized":true,"ratio_value":["80931"],"stat_item_id":15223,"stat_id":"001012000","value":"80931"},{"is_authorized":true,"ratio_value":["88248"],"stat_item_id":15224,"stat_id":"001012000","value":"88248"},{"is_authorized":true,"ratio_value":["7385"],"stat_item_id":15225,"stat_id":"001012000","value":"7385"},{"is_authorized":true,"ratio_value":["23086"],"stat_item_id":15249,"stat_id":"001012000","value":"23086"},{"is_authorized":true,"ratio_value":["24683"],"stat_item_id":15251,"stat_id":"001012000","value":"24683"}],"point_coordinates":[139.77663,35.67691],"geocode":"13102","points":[["東京都","中央区"]]},

レーダーチャートの表示にはChart.jsを使用します

HTMLファイルのheadセクションにChart.jsをインポートし、レーダーチャート用のcanvas要素をHTMLに追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Leaflet Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div id="map"></div>
    <canvas id="radarChart"></canvas>
  </div>
  <script src="index.js"></script>
</body>
</html>

JavaScriptでレーダーチャートの生成と表示を設定します。

function createRadarChart(districtName, data) {
    const ctx = document.getElementById('radarChart').getContext('2d');
    const totalPopulation = data.find(entry => entry.stat_item_id === 15222)?.value || 0; // 人口総数
    const foreignPopulation = data.find(entry => entry.stat_item_id === 15225)?.value || 0; // 外国人人口
    const elderlyPopulation = data.find(entry => entry.stat_item_id === 15251)?.value || 0; // 高齢者人口（65歳以上）
    const youngPopulation = data.find(entry => entry.stat_item_id === 15249)?.value || 0; // 年少人口（15歳未満）
    const malePopulation = data.find(entry => entry.stat_item_id === 15223)?.value || 0; // 男性人口
    const femalePopulation = data.find(entry => entry.stat_item_id === 15224)?.value || 0; // 女性人口

    // 各割合を計算
    const foreignRatio = totalPopulation > 0 ? (foreignPopulation / totalPopulation) * 100 : 0; // 外国人人口割合
    const elderlyRatio = totalPopulation > 0 ? (elderlyPopulation / totalPopulation) * 100 : 0; // 高齢化率
    const youngRatio = totalPopulation > 0 ? (youngPopulation / totalPopulation) * 100 : 0; // 年少人口割合
    const maleRatio = totalPopulation > 0 ? (malePopulation / totalPopulation) * 100 : 0; // 男性人口割合
    const femaleRatio = totalPopulation > 0 ? (femalePopulation / totalPopulation) * 100 : 0; // 女性人口割合

    const chartData = {
        labels: ['外国人人口割合', '高齢化率', '年少人口割合', '男性人口割合', '女性人口割合'],
        datasets: [{
            label: districtName,
            data: [foreignRatio, elderlyRatio, youngRatio, maleRatio, femaleRatio],
            backgroundColor: 'rgba(34, 202, 236, 0.2)',
            borderColor: 'rgba(34, 202, 236, 1)',
            borderWidth: 1
        }]
    };

    // 既存のチャートを破棄
    if (window.radarChart instanceof Chart) {
        window.radarChart.destroy();
    }

    // チャートを描画
    window.radarChart = new Chart(ctx, {
        type: 'radar',
        data: chartData,
        options: {
            scales: {
                r: {
                    beginAtZero: true
                }
            }
        }
    });

    // チャートを表示
    document.getElementById('radarChart').style.display = 'block';
}

今回表示する五つのデータは外国人人口割合、高齢化率、年少人口割合、男性人口割合、女性人口割合で、これらは取得した外国人人口、65歳以上人口、15歳未満人口、男性人口、女性人口データをもとに、人口総数で割ったものです。

cssのコードは以下になります。

/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.container {
    display: flex;
    height: 100vh;
}

#map {
    height: 100%;
    width: 50%;
}

#radarChart {
    height: 100%;
    width: 50%;
    display: block;
}