🤖
都道府県別の総人口推移折れ線グラフ作成📈
都道府県別の総人口推移グラフ
https://prefectures-populations.netlify.app/
1.概要
都道府県一覧の取得:
RESAS APIの「都道府県一覧」エンドポイントからデータを取得します。
→全国の都道府県の一覧を提供するAPI
動的なチェックボックス生成:
取得した都道府県一覧のAPIレスポンスを利用して、Webページ上に都道府県のチェックボックスを動的に生成します。
※各チェックボックスは都道府県を表示し、ユーザーがこれらを選択できるようにします。
人口構成の取得:
ユーザーが選択した都道府県に対して、RESAS APIの「人口構成」エンドポイントから人口構成データを取得します。これにより、選択された都道府県の年齢別人口データなどが得られるようになります。
折れ線グラフの生成:
取得した人口構成データを元に、動的な折れ線グラフを生成します。
X軸には「年度」、Y軸には「人口」を配置し、選択された都道府県の人口構成推移を視覚的に表示します。
目的
RESAS APIを利用して都道府県の情報を取得し、それを基にユーザーが選択した都道府県の人口構成をグラフで表示すること。
これにより、都道府県ごとの人口動態を視覚的に理解できるユーザーインターフェースを提供することができる。
特徴
RESAS APIの利用登録(無料)を行い、実際の人口データを取得している。
また、1960年〜2045年までの都道府県別の総人口推移を折れ線グラフで表示できるようにしている。
2.仕様
使用している言語/フレームワーク
- 言語：Javascript
- フレームワーク：Vue.js
- 折れ線グラフ：chart.js
３．最後に
工夫したこと
- 他県と比較できるように、複数県指定して人口推移をグラフで表示できるようにしたこと。
- 都道府県一覧、人口推移の折れ線グラフをコンポーネント化し、急な機能やデザインの開発に対応できるようにコンポーネント化したこと。
- PC/スマートフォン表示に対応していること(レスポンシブデザイン対応)
4.API取得資料
Discussion