データビジュアライゼーション・ラボ

2018-02-152022-10-03

インタラクティブなグラフ、チャート、データ可視化のためのjavascriptライブラリ、D3.js(Data-Driven Documents)の使い方を徹底解説します。v4/5に対応しています。

• チュートリアル
  1. 環境準備
  2. 要素の追加方法 (append)
  3. データのバインド方法 (data,enter)
  4. SVGの基礎
  5. グラフの書き方
• 基本的な使い方
  1. data使い方(enter,update,exit)
  2. 表(table)の作り方
  3. カラースケールの作り方
  4. カラーテーマまとめ
  5. アニメーションのエフェクト一覧
  6. Web上のファイルの読み込み方(d3-fetch)
  7. 乱数生成関数の使い方
• マウス/タッチイベント
  1. drag使い方
  2. zoom使い方
  3. 範囲選択 (brush) 使い方
  4. 範囲選択 (brush) 使い方 (タッチパネル応用)
• 基本チャート
  • 棒グラフ(bar chart)
    1. 棒グラフの作り方 – 基本
    2. 棒グラフでのtooltipの追加方法
    3. 棒グラフを並び替える方法
  • 円グラフ(pie chart)
    1. 円グラフの作り方
  • 散布図(scatter plot)
    1. 散布図の作り方 – 基本
  • 折れ線グラフ(line chart)
    1. 折れ線グラフの作り方 – 基本
    2. 折れ線グラフ/散布図補完関数の種類一覧
    3. 面グラフの作り方 – 折れ線グラフ応用
• コンター図/ヒートマップ
  1. コンター図の作り方
  2. 密度推定の使い方
  3. ヒートマップの作り方
• 階層構造 (hierarchy)
  1. データ構造と基本的な使い方
     • cluster
       1. cluster使い方
       2. clusterのノードを円周上に配置する方法
     • tree
       1. tree使い方
       2. treeを開閉する方法
     • pack
       1. pack使い方
     • treemap
       1. treemap使い方
     • partition
       1. partition使い方
       2. サンバースト図の作り方
       3. サンバースト図をインタラクティブにする方法
• フォースシミュレーション (forceSimulation)
  1. 最初のプログラム
  2. ノード相互作用詳細
  3. リンク相互力詳細
  4. 座標更新アルゴリズム詳細
  5. ラジアルフォース
  6. ノードに複数のsvgを含める方法
  7. クリックしたノードと関連リンクをハイライトする方法
• info
  • D3.js v5.0.0 プレリリースまとめ
  • D3.js 関連書籍まとめ