01
スタットタイル
KPIを一望するダッシュボード的タイル。カウントアップ・差分バッジ・スパークラインの3点セット。
月間アクティブ
0
▲ 12.4%
セッション
0
▲ 6.1%
CVR
0%
▼ 0.8%
売上 ($)
0
▲ 22.7%
満足度
0
▲ 1.3
解約率
0%
▲ 0.4%
02
バーチャート
月別売上の比較。グラデーション + ホバーで値が浮かび上がる。
03
バーレース
時系列ランキング。順位が入れ替わるたび、行が滑らかに並べ替わる。
2018
04
ラインチャート
3系列の推移を、塗りつぶしエリアと共に。線が左から右へ描かれていく。
05
スタックエリア
4カテゴリの構成比が時間と共に変化する様子。曲線で柔らかく。
06
ドーナツチャート
構成比を一目で。各セグメントは stroke-dashoffset で順に描画される。
0
合計
07
レーダーチャート
多次元の評価をひと目で。2つのプロファイルを重ねて比較。
スキル評価
2024年
2026年
6つの軸で能力プロファイルを描画。2年間の成長が一目瞭然。
08
プログレスリング
アクティビティリング風の進捗表示。stroke-dasharray + dashoffset で円弧をアニメ。
09
ゲージメーター
速度・温度・健康度。半円弧と回転する針で「閾値」を視覚化。
10
カレンダーヒートマップ
GitHub風の365日アクティビティ。色の濃淡で値を、セルの順次表示で時間を表現。
少
多
11
バブルチャート
X/Y/サイズの3次元で表現。スタートアップの売上 vs 成長率 vs 規模など。
12
ネットワークグラフ
力学シミュレーション (force-directed) でノードが自然に配置される。ドラッグして動かせる。
ノードをドラッグできます
13
サンキー風フロー
「どこから、どこへ、どれだけ流れたか」を太さで表現。3層のカテゴリフロー。
14
ファネルチャート
コンバージョンファネル。各ステージで何%が次へ進んだか。
15
タイムライン
マイルストーンを縦軸に。IntersectionObserverで読み手の視線に合わせて1つずつ登場。