都道府県別人口変化率チャートを追加 - オープンデータの活用

2026年6月3日

Netplan Matsuyama

Developer

やったこと

既存の人口推計チャート（全国総人口の推移）に加えて、都道府県別の人口変化率（2015→2020年）をバーチャートで表示できるようにしました。

→ 人口推計ページ

チャートの内容

横軸: 47都道府県
縦軸: 人口変化率（%）
色分け: 増加した都道府県は緑、減少した都道府県は赤

opendata-astro の拡張

今回の対応にあわせて kazweda/opendata-astro に 3 つの機能を追加しました。

prefectureOnly オプション（v0.1.6）

EStatFetcher に prefectureOnly?: boolean を追加しました。e-Stat API のレスポンスには全国・都道府県・市区町村が混在することがあるため、true を指定すると都道府県コード（\d{2}000、00000 除く）だけに絞り込めます。

{
  id: 'population-by-prefecture',
  fetcher: new EStatFetcher(),
  params: {
    statsDataId: '0004021102',
    classFilters: { cdCat01: '000', cdCat02: '001' },
    seriesKey: 'area',
    prefectureOnly: true,
  },
}

Series.colors オプション（v0.1.7）

DataSet.series に colors?: string[] を追加しました。バーごとに色を指定できます。OpenDataChart はこの配列を Chart.js の backgroundColor にそのまま渡します。

showLegend prop（v0.1.8）

OpenDataChart に showLegend?: boolean（デフォルト true）を追加しました。per-bar カラーを使った単一系列チャートでは Chart.js の凡例が最初のバーの色しか表示しないため、false にして代わりにテキストで色の説明を添えています。

データ変換

都道府県別の生データ（ラベル=年、系列=都道府県）を MDX 内で変換し、「ラベル=都道府県名、系列=変化率」に組み替えています。

export const prefectureChangeData = (() => {
  const idx2015 = prefectureData.labels.findIndex((l) => l.startsWith('2015'));
  const idx2020 = prefectureData.labels.findIndex((l) => l.startsWith('2020'));
  return {
    labels: prefectureData.series.map((s) => s.name),
    series: [
      {
        name: '人口変化率（%）',
        values: prefectureData.series.map((s) => {
          const pop2015 = s.values[idx2015];
          const pop2020 = s.values[idx2020];
          return Math.round(((pop2020 - pop2015) / pop2015) * 1000) / 10;
        }),
        colors: prefectureData.series.map((s) =>
          s.values[idx2020] >= s.values[idx2015]
            ? 'rgba(75, 192, 192, 0.8)'
            : 'rgba(255, 99, 132, 0.8)'
        ),
      },
    ],
  };
})();