初心者
基礎を学ぶ(01-10)
D3.jsの基本的な概念と操作方法を学びます
01
Hello D3.js
DOM選択・追加・テキスト設定・スタイル適用
02
SVGの基本
円・四角形・線・パスなどSVG要素の描画
03
データバインディング
Enter-Update-Exit パターン
04
スケール(Scale)
Linear, Band, Ordinal, Sqrt スケール
05
軸(Axes)
axisBottom, axisLeft, 時間軸, グリッド線
06
基本的な棒グラフ
縦棒グラフ・横棒グラフの作成
07
基本的な折れ線グラフ
d3.line(), カーブタイプ
08
基本的な円グラフ
d3.pie(), d3.arc(), ラベル配置
09
トランジション
アニメーション, イージング関数, 遅延
10
イベントハンドリング
マウスイベント, クリック, ドラッグ
中級者
実践的なチャート(11-20)
より実践的なチャート作成とインタラクション機能を学びます
11
散布図
ツールチップ, 色・サイズエンコーディング
12
エリアチャート
d3.area(), グラデーション, 積み上げ
13
マルチラインチャート
複数系列, 凡例, ホバーインタラクション
14
積み上げ棒グラフ
d3.stack(), グループ化, 正規化表示
15
ドーナツチャート
内側半径, 中央テキスト, アニメーション
16
ツールチップ
基本・リッチ・SVG内ツールチップ
17
レスポンシブチャート
viewBox, リサイズ対応
18
データの更新
リアルタイム更新, General Update Pattern
19
ズーム機能
d3.zoom(), パン・ズーム, スケール連動
20
ブラッシング
d3.brush(), 範囲選択, フォーカス+コンテキスト
上級者
高度な可視化(21-30)
高度な可視化手法とインタラクティブなダッシュボードを学びます
21
力指向グラフ
d3.forceSimulation(), ノードドラッグ
22
ツリーマップ
d3.treemap(), ドリルダウン
23
階層ツリー
d3.tree(), 展開/折りたたみ
24
サークルパッキング
d3.pack(), ズーム
25
サンバースト図
d3.partition(), 階層表示
26
コードダイアグラム
d3.chord(), 関係性可視化
27
世界地図
d3.geo, 投影法, コロプレス地図
28
ヒートマップ
グリッドベース, 相関マトリックス
29
レーダーチャート
多角形チャート, 複数データ比較
30
インタラクティブダッシュボード
複合チャート, フィルター, リアルタイム更新