§01-01
草チャート / contribution heatmap
日付ごとの活動量を方眼の色の濃さで示す。
一年分の活動の継続や偏りを一目で見渡せる。学習記録や投稿頻度など、日々の積み重ねを可視化して習慣づけを促したいときに使う。
実装のポイントgrid-flow-col と grid-rows-7 で週を列、曜日を行に並べると配置計算が要らない。色だけに頼らず各セルの title や aria-label に日付と件数を持たせる。
- CSS のみ
- アクセシビリティ
§01
可視化・データ表現
Data Visualization
- Patterns
- 30
- Demos
- 30
§01-02
カレンダーヒートマップ
月カレンダーの日付セルを値の強さで色分けする。
日ごとの活動量や売上を一月単位で俯瞰する。曜日や週の偏りを探すときや、継続の記録を見せたいときに向く。
実装のポイント月初の曜日ぶん空セルを先頭に入れて grid-cols-7 に流し込む。強度の段階は凡例と数値ラベルを併記し、色覚に依存しない表現にする。
- CSS のみ
§01-03
スキルマップ / レーダーチャート
複数の軸のスコアを多角形で重ねて示す。
能力や評価を軸ごとに比べ、全体の形から強みと弱みを一目で読み取れる。複数の対象を重ねて比較するときに向く。
実装のポイント軸の最大値を domain で固定しないと値ごとに目盛りが変わり比較できない。軸は 5〜8 本に抑え、ラベルが外周で重ならないよう outerRadius を詰める。
- チャート
§01-11
relationship graph (force-directed)
ノードとエッジの関係を力学配置で描く。
人や概念のつながりを俯瞰し、密に結びついた群や孤立した点を見つける。関係の全体像を眺めたいときに向く。
実装のポイントノード間の斥力とエッジのばねを反復計算して配置を収束させる。d3-force などを使い、tick ごとの再描画は requestAnimationFrame にまとめる。
- チャート
- アニメーション
§01-12
chord / arc diagram
項目間の関係を円周上の弧と帯で結んで示す。
複数の項目がどれとどれだけ結び付いているかを一枚で見せる。移動や取引のような双方向の流れを、表より直感的に把握したいときに使う。
実装のポイント円周上に各カテゴリの弧を量に比例して割り当て、弧同士を二次ベジェのリボンで結ぶ。ホバーで関係する帯だけ残して他を薄くすると読みやすい。
- チャート
§01-14
ゲージ / ダイヤル
一つの指標を針や円弧の塗りで示す。
現在値が目標や上限に対してどこにあるかを一目で伝える。監視画面で指標を一つだけ強調したいときに向く。
実装のポイント半円の円周長を strokeDasharray で塗り分け、針は値を 180° 範囲の角度に変換して回す。SVG 属性は CSS transition が効かないので針は transform: rotate で動かす。
- チャート
- アニメーション
§01-17
ヒストグラム / ビン分布
値を階級に分けて各区間の件数を棒で示す。
データの分布の形や偏り、外れ値を把握できる。価格帯や応答時間など、平均値だけでは見えない散らばりを示したいときに使う。
実装のポイントビン幅の選び方で分布の見え方が変わるため、Sturges や Freedman-Diaconis 等の規則で決める。棒の間隔は詰めて連続量であることを示す。
- チャート
§01-18
箱ひげ / バイオリン
四分位と外れ値で分布の広がりを示す。
平均だけでは見えない値のばらつきや偏りを比較する。複数グループの分布を並べて差を確かめたいときに向く。
実装のポイント四分位と最小・最大（または 1.5IQR のひげと外れ値）を SVG の線と矩形で描く。分布の形まで見せたい場合はカーネル密度推定でバイオリンを重ねる。
- チャート
§01-19
エリア / 階段グラフ
時系列の値を面で塗って推移を示す。
累積や合計など量の推移を伝えたいときに使う。階段表示は料金や在庫のように区切りで変わる値を正確に見せられる。
実装のポイント面の塗りは上から透明へのグラデーションにして線を主役にする。離散的に変わる値は type=「stepAfter」の階段表示にし、補間で嘘の傾きを作らない。
- チャート
§01-20
キャンドルスティック
期間ごとの始値・高値・安値・終値を 1 本の足で示す。
期間ごとの値動きの幅と方向を 1 本で読めるので、価格や指標の推移を細かく追える。上下動の激しさや転換点を見極めたい場面に使う。
実装のポイント始値と終値の大小で実体の色を決め、高値・安値はヒゲの線で描く。始値と終値が同じ足は高さ 0 になるので最低 1px を確保する。
- チャート
§01-21
ヒートマップ (matrix)
行と列の組み合わせの値を色の濃淡で示す。
多数の組み合わせの大小を一画面で比べられる。曜日と時間帯のアクセス数や項目間の相関など、表の数字では読みにくい傾向を見せるときに向く。
実装のポイント値を透明度や色の明度に写像し、背景の濃さに応じて文字色を白黒で切り替えてコントラストを保つ。相関行列なら対角線を基準に対称性を確認する。
- チャート
§01-22
等高線 / density overlay
地図や平面上の密度を等高線で重ねて示す。
点が多すぎて重なる場所の濃淡を見せる。地域ごとの集中度を比べたいときや、個々の点より傾向を伝えたいときに向く。
実装のポイント格子状の密度値を marching squares で等値線に変換し、閾値ごとに半透明で重ねる。地図に重ねる場合は投影座標系をベースマップと揃える。
- チャート
§01-23
樹形図 (dendrogram)
階層クラスタの結合過程を樹形で示す。
似たもの同士がどの順にまとまるかを辿れる。分類の階層構造や、どの深さで分割するかを検討するときに使う。
実装のポイント結合の高さをクラスタ間距離に比例させ、各結合を「コ」の字の折れ線で描く。葉の並び順はクロスが生じないように並べ替える。
- チャート
§01-25
Bullet chart
実績と目標、評価帯を一本の軸に重ねて示す。
目標に対する達成度を狭い幅で正確に伝えられる。KPI の一覧やレポートで、ゲージより場所を取らずに複数指標を並べたいときに使う。
実装のポイント背景の濃淡で評価帯、太い実績バー、細い縦線の目標値を 1 本の軸に重ねる。実績値と目標値は数値でも併記し、色だけで読ませない。
- チャート
- CSS のみ
§01-26
Bump chart
期間ごとの順位の入れ替わりを折れ線で示す。
項目の順位が時間とともにどう入れ替わったかを追う。シェア順やランキングの推移で、値の大小より序列を見せたいときに向く。
実装のポイントY 軸を reversed にして 1 位を上に置き、目盛りを整数の順位に固定する。系列が多いときはホバーで 1 本を強調し、他を薄くする。
- チャート
§01-28
diff viewer
2 つのテキストの差分を行単位で並べて示す。
変更前後の文章やコードを並べ、どこが増えどこが消えたかを示す。レビューや履歴の確認で、全文を読み直さずに変更点だけ追いたいときに使う。
実装のポイント行ごとに追加・削除・文脈の種別を持ち、旧行番号と新行番号を別カラムで表示する。行内の変更箇所は単語単位の差分で追加ハイライトする。
- CSS のみ
§01-29
JSON viewer
JSON を階層ごとに折りたたんで表示する。
深い入れ子のデータを必要な部分だけ開いて読める。API レスポンスの確認や設定ファイルの閲覧など、構造を把握しながら値を探す場面に向く。
実装のポイント再帰コンポーネントで各ノードが開閉状態を持ち、初期展開は深さで制限する。開閉ボタンには aria-expanded を付け、矢印キーで移動できる tree にする。
- 状態管理
- キーボード操作
§01-30
log viewer
流れてくるログを表示し、検索で絞り込める。
稼働中の処理から出る出力をその場で追い、問題の箇所を探す。デプロイやジョブの実行状況を見守る画面に向く。
実装のポイント表示行数に上限を設けて古い行を捨て、末尾追従は利用者が上にスクロールしたら止める。大量ログは仮想スクロールで描画コストを抑える。
- リアルタイム
- タイマー
- モック