住民基本台帳データを地図で可視化する (3) 地図表示のカスタマイズ編

これまでのステップで、市区町村ごとの人口データ（住民基本台帳データ）をポップアップ表示できる地図が完成しました。しかし、見た目はまだシンプルで、一目で人口の傾向を把握するのは難しいかもしれません。

過去の記事

今回は、この地図をさらに分かりやすくするためのカスタマイズ方法を紹介します。

1. 人口増減（住民基本台帳データ）に応じた色付け

地図に「塗りつぶし」を追加することで、人口が増加している地域と減少している地域を色で視覚的に区別できます。

市区町村別人口データ(GIS)(住民基本台帳に基づく人口、人口動態及び世帯数調査)

① 色の定義

まず、人口増減の数値を色に変換するための関数を作成します。index.htmlの<script>タグ内に、以下の関数を追加してください。

/**
 * 人口増減数に基づいて色を返す関数
 * @param {number} d - 人口増減数
 * @returns {string} - HEXカラーコード
 */
function getColor(d) {
    if (d === null) return '#ccc'; // データがない場合
    if (d > 0) return '#007bff'; // 人口増加（青系）
    if (d < 0) return '#dc3545'; // 人口減少（赤系）
    return '#6c757d'; // 変化なし
}

この関数は、人口増減数が正（増加）なら青、負（減少）なら赤、0（変化なし）ならグレーを返すシンプルなロジックです。

② スタイルへの適用

次に、L.geoJson()関数のstyleオプションを変更します。fillOpacity（塗りつぶしの透明度）を0.7に、fillColorに先ほど作成したgetColor()関数を適用します。

L.geoJson(geoJson, {
  style: feature => {
    // スプレッドシートのデータを取得
    const lookupCode = feature.properties.code;
    const data = populationMap.get(lookupCode);
    
    // 増減数を取得 (データがない場合は null)
    const change = data ? Number(data.pop_change_total) : null;
    
    return {
      color: "#555",
      weight: 1,
      fillOpacity: 0.7, // 塗りつぶしの透明度
      fillColor: getColor(change) // 人口増減に応じて色を決定
    };
  },
  onEachFeature: function(feature, layer) { /* ... */ }
}).addTo(map);

これで、地図が人口の増減に応じて色分けされ、一目で傾向が分かるようになりました。

2. 親市区町村のデータをポップアップに追加

政令指定都市のように「区」で人口データ（住民基本台帳データ）が提供されている場合、その区だけでなく、市全体（区部全体）の人口データも一緒に見られるようにすると、より便利です。今回のコードには、この機能がすでに実装されています。

① Google Apps Scriptでのデータ連携

まず、第1回で実行したaddParentCityCodes()関数が、スプレッドシートのM列に親市のコードを自動で追加しています。例えば、「札幌市中央区」の行には、親である「札幌市」のコードがこの列に格納されています。

② HTMLでのデータ表示ロジック

index.htmlのonEachFeature関数の内部では、以下のロジックで親市のデータを取得・表示しています。

まず、現在の市区町村のデータオブジェクトdataからparent_code（M列）を取得します。
if (data.parent_code && String(data.parent_code).trim() !== '')という条件文で、親コードが存在するかを確認します。
親コードが存在する場合、そのコードをキーとしてpopulationMapから親市のデータ（parentData）を探します。
親市のデータが見つかった場合、HTMLの文字列として、市全体の人口情報（人口、増減、世帯数など）を追加で生成し、ポップアップに追記します。この際、<div class="city-data">というクラスを適用して、子区のデータと区別しやすくしています。

この仕組みにより、ユーザーが区の領域をクリックした際に、その区のデータだけでなく、市全体のデータも同時に確認できる、より情報量豊かなポップアップが実現します。

3. まとめとその他の応用

今回の一連のブログ記事では、以下のステップで人口データの可視化を行いました。

データ準備
1. 政府統計と国土交通省のデータを取得・加工。
ウェブアプリ化
1. GASとLeaflet.jsを使って地図とデータを連携。
デザインカスタマイズ
1. 人口増減に応じた色分けやポップアップ情報の追加。

これらの基本的な技術を応用すれば、さらに表現豊かな地図を作成できます。

ヒートマップ
- 人口密度や人口増減率を色濃淡で表現する。
フィルタリング機能
- 特定の都道府県や人口規模の地域だけを表示する機能を追加する。
グラフ表示
- ポップアップに円グラフや棒グラフを追加し、より詳細なデータを表示する。
時系列データ
- 複数の年のデータを重ねて表示し、人口の変化をアニメーションで表現する。

このブログで紹介した手順は、人口データに限らず、経済データ、気象データなど、さまざまな地理情報を可視化するための土台となります。

ご自身の興味のあるデータを組み合わせて、オリジナルの地図を作成してみてはいかがでしょうか？

マーケティングサイエンスラボ