Screenshots
Overview
概要
D3.js(Data-Driven Documents)は、データをDOM・SVG・Canvasへ直接結びつける低レイヤーの可視化ライブラリです。完成形のグラフを返すChart.js等とは異なり、軸・色・座標変換といった部品を自分で組み上げる自由度が持ち味。本サイトはその表現力を『読む』のではなく『触る』ことで体感してもらう展示室で、力学グラフ・階層可視化(ツリーマップ／サンバースト／サークルパック)・日本地図コロプレス・複数系列の時系列＋ブラシ・enter/update/exitの遷移という6つのデモを、すべてライブパラメータ操作つきで並べています。集計チャートはあえて外し、力学・階層・地理・アニメーションというD3ならではの領域に振り切りました。
How to use
遊び方・使い方
トップの目録からデモを選びます。力学グラフはノードをドラッグして揺らし、引力・リンク距離・衝突半径のスライダーで挙動が即座に変わります。階層可視化は同じデータをツリーマップ／サンバースト／サークルパックへ切り替え、クリックでズーム。日本地図は人口密度・総人口・面積の指標を切り替えて色分けし、県をクリックで拡大。時系列は下段のブラシで期間を選ぶと上段が連動し、曲線補間やエリア塗りを切り替えられます。遷移デモではenter(緑)・update(白)・exit(赤)の色分けとカウントで、D3のデータ結合の考え方を目で追えます。
Tech stack
技術スタック
Next.js 16 App Router上でデモを1ルート1機能に分割し、それぞれをdynamic import(ssr:false)で遅延マウント。地図は令和2年国勢調査(総務省統計局)と地球地図日本(国土地理院)の実データ、その他は再現可能な合成データを用います。d3-force/d3-hierarchy/d3-geo/d3-brush/d3-transition/d3-delaunayなどv7のモジュール群を用途別に利用しています。
Highlights
工夫した点
- サーバー処理を挟まないよう合成データはビルド時に決定論的な自前PRNG(mulberry32系)で生成し、県境界はTopoJSONをtopojson-clientのfeature()で展開。SVGは160ノードまで、それ以上はCanvasへ描画関数を切り替えて実用的なフレームレートを確保
- ReactはSVGコンテナと操作UIだけを持ち、内部はd3のselection/joinへ全面委譲。力学シミュレーションはuseRefに保持し、アンマウント時のsimulation.stop()／timer破棄を徹底してリークを防止
- 3層構成(Server page → Client wrapper → dynamic ssr:false)でブラウザ専用処理を隔離し、デモごとに遅延ロード。ResizeObserverとprefers-reduced-motion対応で、再描画のちらつきと過負荷を抑制
To improve
改善したい点
- Canvas系の大規模ノードはモバイルでの描画負荷に伸びしろがあり、品質の自動調整は未対応
- 階層・地図デモのカラースケールや配色をUIから選べる範囲をさらに広げたい
- ボロノイなど一部デモはフェーズ2の位置づけで、点数・演出の作り込み余地がある
What's next
今後の展望
- コード表示パネルを付け、各デモの核となるd3コードをその場で読めるように
- サンキー図・弦図・パック階層のズーム連動など、D3の幅を見せる新デモの追加
- 地図デモのメッシュ人口や時系列の実データ差し替えによる、より実践的な題材への拡張