Screenshots
Overview
概要
デモ用のランダムデータではなく、気象庁の実際の気象データとe-Stat(政府統計)を前処理して静的同梱し、実用的なダッシュボードとして見せるチャートギャラリーです。実データゆえに『東京の猛暑日が増えている』『人口が東京へ集中している』といった発見があり、同じデータをChart.jsとApache EChartsの両方で描く『描き比べ』のセクションも用意。各チャートにはライブラリ名とバージョン、チャート種別、出典を明記しています。折れ線・積み上げ棒・レーダー・散布図・カレンダーヒートマップ・人口ピラミッド・サンバーストなど計十数点を収録。
How to use
遊び方・使い方
トップのダッシュボードでKPIカード(例: 2025年東京の猛暑日数)と代表チャートを一望し、Chart.jsギャラリー／EChartsギャラリーでそれぞれ6点ずつ閲覧します。/versusでは同一データ(月別気温・都道府県人口・年齢構成)を左右で描き比べ、記述量やツールチップ・凡例の挙動の違いを確認でき、データ点数を月次12から日次365へ増やして描画パフォーマンスの差を体感するトグルもあります。各チャートは『表で見る』でデータテーブル表示に切替でき、/dataで出典と前処理を確認できます。
Tech stack
技術スタック
TypeScriptNext.js 16React 19chart.js 4react-chartjs-2echarts 6echarts-for-reactTailwind CSS v4
Chart.js 4とreact-chartjs-2、ECharts 6とecharts-for-reactを併用。KPIの正しさは、JSON生成スクリプトの合計・件数チェックで担保しています。元CSVはリポジトリに含めず、前処理スクリプトでJSON化して同梱。ライトのダッシュボード意匠でまとめています。
Highlights
工夫した点
- 全チャートはuse client＋next/dynamic(ssr:false)で描画し、データ読み込みと整形はRSCで行いpropsで渡す(クライアントfetchなし)。EChartsはecharts/coreと必要なチャート/コンポーネントのみをuse()で登録してバンドルを削減
- ライブラリ横断の共通カラーパレット定数を用意し、描き比べが配色差で誤読されないよう統一。ResizeObserverでの再レイアウトとアンマウント時のdispose/destroyを徹底
- チャートはIntersectionObserverで表示領域に入った時にマウントし一斉描画を回避。prefers-reduced-motionでアニメーションを止め、aria-labelと表フォールバックでアクセシビリティを確保
To improve
改善したい点
- 収録データが気象庁・e-Statの一部時点で、更新の自動化(定期取得→JSON化)は未整備
- EChartsのフルバンドルは大きく、遅延ロードしても初回の重さに伸びしろがある
- 描き比べの評価に主観が残るため、記述量以外の客観指標を増やしたい
What's next
今後の展望
- 地図(コロプレス)や時系列の実データテーマの追加
- 気象庁APIからの定期取得によるデータ鮮度の維持
- ユーザーが期間・地点を選んで描画できるインタラクティブ化