D3.js (Data-Driven Documents)

D3.jsを始める

• D3.jsの概要
• D3.js 要素の追加 - append()
• D3.js データバインディングの方法 - data(), enter()
• D3.js selection タグの選択と操作 - select(), selectAll()
• D3.js SVGの使い方 - rect, circle, line, text
• D3.js 散布図グラフを段階的に描画して説明 - scaleLinear(), domain(), range(), axisBottom()

D3.jsの基本的な使い方

• D3.js dataの使い方 - Enter, Update, Exit
• D3.js テーブルの描画 - Object.keys(), map()
• D3.js Grid(グリッド)の描画
• D3.js カラースケール(Color Scale)を作成する方法 - d3.scaleLinear, d3.scaleOrdinal, d3.interpolate, d3.scaleSequential, d3.scaleThreshold

D3.jsイベント

• D3.js dragの使い方 - d3.drag()
• D3.js zoomの使い方
• D3.js 範囲選択(d3.brush) タッチパネルの使い方
• D3.js 範囲選択(d3.brush)の使い方

D3.jsチャート

• D3.js 棒グラフ(bar chart)
• D3.jsで横向きのBar Graph（棒グラフ）を描画する
• D3.js パイチャート(Pie Chart)の作成
• D3.js 散布図(Scatter Plot)の描画
• D3.js 折れ線チャート(line chart)の作成
• D3.js 折れ線グラフ・散布図の種類
• D3.js 面グラフ(area chart)の作成方法

D3.js階層

pack

• D3.js hierarchyのデータ構造と使い方
• D3.js clusterの使い方
• D3.js clusterで円周上にノードを配置する方法
• D3.js packの使い方

D3.js forceSimulation

• D3.js forceSimulationの基本構成
• D3.js forceSimulationのノード相互作用
• D3.js forceSimulationのリンク作用力
• D3.js forceSimulationの座標更新アルゴリズム/実行関数
• D3.js forceSimulationのラジアルフォース
• D3.js forceSimulationのノードに複数のSVG要素を含める方法
• D3.js forceSimulationのハイライト表示