D3.js例文辞典

このページはD3.jsの用例を扱っています。D3.jsのD3はData-Driven Documentsを意味しています。
D3.jsの入門書、発売中です。D3.jsについて学習したい人はぜひどうぞ。

データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方
Kindle版が発売されました。また、Google Play、楽天Koboでも購入できるようになりました。

更新情報はTwitter (@openspc)でアナウンスしています。

＊勉強用に作成したページなので間違いや不具合の出るサンプルがあるかもしれません。致命的なもので、これはまずいというサンプルがありましたら[email protected]までメールをください。


Last update:2014/7/1 PM 2:53

基本

  1. D3.jsを読み込む

ファイル (CSV, TSV, JSON, TEXT, HTML, XML)

  1. タブ区切りテキストを読み込む
  2. CSV(カンマ区切り)ファイルを読み込む
  3. CSVファイルの1行目の項目名（ヘッダーのラベル名）を付け直す
  4. JSON形式のファイルを読み込む
  5. プレーンテキスト形式のファイルを読み込む
  6. HTMLファイルを読み込む
  7. XML形式のファイルを読み込む
  8. 任意の文字で区切られたテキストファイルを読み込み処理する

DOM操作／指定

  1. DOM要素をID名で指定する
  2. DOM要素を直接指定する
  3. DOM要素の属性値を設定する
  4. 複数のDOM要素をクラス名で指定する
  5. 複数のDOM要素をノードで指定する
  6. 要素内のHTMLデータを読み出す
  7. 要素内のテキストデータを読み出す

表／テーブル

  1. 新規にテーブルを生成して1次元配列の数値データを出力する
  2. 新規にテーブルを生成して1次元配列の数値データを加工して出力する
  3. 新規にテーブルを生成して2次元配列の数値データを出力する
  4. 新規にテーブルを生成して2次元配列の数値データを加工して出力する
  5. CSVファイルを読み込んでデータを出力する（1行に1つのデータの場合）
  6. CSVファイルを読み込んでデータを出力する（1行に複数のデータがある場合）
  7. タブ区切りファイルを読み込んでデータを出力する（1行に1つのデータの場合）
  8. タブ区切りファイルを読み込んでデータを出力する（1行に複数のデータがある場合）
  9. 1秒ごとに更新されるデータをテーブルに出力する

スタイルシート

  1. 要素の文字色を指定する
  2. 要素の背景色を指定する
  3. 要素の横幅を指定する
  4. 要素のスタイルシートの値を読み出す
  5. 要素のスタイルをまとめて指定する

配列処理

  1. 配列内の合計を求める (sum)
  2. 配列内の最大値を求める (max)
  3. 配列内の最小値を求める (min)
  4. 2つの値を比較し-1,0,-1のいずれかを返す(ascending, descending)
  5. 配列内の最小値と最大値を求める (extent)
  6. 配列内の平均値を求める (mean)
  7. 配列内の中央値を求める (median)
  8. 配列要素をシャッフル（ランダムに並べ替える）する (shuffle)
  9. 配列要素を指定した順序で並べ替える (permute)
  10. 多次元配列を一次元配列にする（フラット化する） (merge)
  11. 等差数列の配列を生成する (range)
  12. 2つの配列から同じ位置にある要素を新たな配列として生成する (zip)
  13. JSONデータ/オブジェクトからキーと値を取り出す (entries)

数学計算

  1. 通常の乱数値やガウス分布に基づいた乱数値を生成する (random.normal)

数値変換／フォーマット変換／形式変換

  1. 数値を%付きの形式にする（小数点以下は切り捨て）
  2. 数値を小数点以下3桁までにし%付きの形式にする
  3. 数値を強制的に負数にする
  4. 数値が正数の場合に+を先頭に付加する
  5. 数値の先頭に$を付加する
  6. 数値の先頭に0を付加する (ゼロパディング)

日付・時間フォーマット変換／形式変換

  1. 日付を「YYYY年MM月DD日」の形式にする
  2. 時間を「HH時MM分SS秒」の形式にする
  3. 時間を12時間制の「HH時MM分SS秒」の形式にする

タイマー／定期的な処理

  1. 一定時間ごと処理する (d3.timer)

色／カラー

  1. あらかじめ定義してある10色を使用する
  2. あらかじめ定義してある20色を使用する

データ処理

  1. データ内の項目内容を既存の要素に書き出す(1)
  2. データ内の項目内容を既存の要素に書き出す(2)
  3. データ内の項目の順番を示す番号を既存の要素に書き出す
  4. データ内の項目内容を要素を追加して書き出す
  5. 項目内容が更新された要素の文字を赤色に変化させる
  6. 項目内容が更新された要素の文字を赤く点滅させる
  7. 要素にデータをセットする（datum）

SVG

  1. 直線を描画する (SVG使用)
  2. 連続直線（ポリライン）を描画する (SVG使用)
  3. D3.jsの機能を使って直線を描画する (SVG使用)
  4. 四角形（矩形）を描画する (SVG使用)
  5. 角丸四角形を描画する (SVG使用)
  6. 正円を描画する (SVG使用)
  7. 楕円を描画する (SVG使用)
  8. テキストを描画する (SVG使用)
  9. 多角形（ポリゴン）を描画する (SVG使用)
  10. 図形を移動させる (SVG使用)
  11. 図形を回転させる (SVG使用)
  12. 図形を横に傾斜させる (SVG使用)
  13. 図形のスケール（縮尺）を指定する (SVG使用)
  14. 図形の変形を一括指定する (SVG使用)
.

アニメーション

  1. アニメーションさせる
  2. 段階的にアニメーションさせる
  3. アニメーションにかかる時間を指定する
  4. 一定時間経過後にアニメーションさせる
  5. アニメーションの動きを指定する

目盛り／スケール／軸

  1. リニア（直線的）な横の目盛りを表示する (SVG使用)
  2. リニア（直線的）な横の目盛りの文字を横向きに表示する (SVG使用)
  3. リニア（直線的）な横の目盛りの文字を右下斜め45度に表示する (SVG使用)
  4. 対数目盛りを表示する (SVG使用)
  5. しきい値に対応した目盛りを表示する (SVG使用)
  6. 目盛りを日付にする (SVG使用)
  7. 目盛りの間隔を指定する (SVG使用)
  8. 目盛りに表示する値を指定する (SVG使用)
  9. 内側と外側の目盛りの棒の長さを指定する (SVG使用)
  10. リニア（直線的）な縦の目盛りを表示する (SVG使用)
  11. リニア（直線的）な縦の目盛りを右側に表示する (SVG使用)

補間 (interpolate)

  1. 2つの数値を補間する（interpolate）
  2. 2つの数値を補間する（interpolateNumber）
  3. 2つの数値を補間し整数値にする（interpolateRound）
  4. 2つの文字列に含まれる数値を補間する（interpolateString）
  5. 2つのカラーを補間する（interpolateRgb）
  6. 2つのカラーを補間する（interpolateHsl）
  7. 2つのカラーを補間する（interpolateLab）
  8. 2つのカラーを補間する（interpolateHcl）
  9. 2つの配列要素を補間する（interpolateArray）

縦棒グラフ

  1. 縦棒グラフを描く (DOM使用)
  2. 縦棒グラフを描く (SVG使用)
  3. 縦棒グラフに目盛りを表示する (SVG使用)
  4. 縦棒グラフの棒の中にデータの値を表示する (SVG使用)
  5. マウスを重ねたら縦棒グラフをアニメーション表示する (SVG使用)
  6. マウスを重ねたら縦棒グラフを指定した時間でアニメーション表示する (SVG使用)
  7. マウスを重ねたら一定時間経過後に縦棒グラフをアニメーション表示する (SVG使用)
  8. マウスを重ねたら縦棒グラフを順番にアニメーション表示する (SVG使用)
  9. マウスを重ねたら縦棒グラフの色を変える (SVG使用)
  10. CSVファイルのデータを読み込んで一括で処理し縦棒グラフを表示する (SVG使用)

横棒グラフ

  1. 横棒グラフを描く (DOM使用)
  2. 横棒グラフを描く (SVG使用)
  3. 横棒グラフに目盛りを表示する (SVG使用)
  4. 横棒グラフの棒の中にデータの値を表示する (SVG使用)
  5. マウスを重ねたら横棒グラフをアニメーション表示する (SVG使用)
  6. マウスを重ねたら横棒グラフを指定した時間でアニメーション表示する (SVG使用)
  7. マウスを重ねたら一定時間経過後に横棒グラフをアニメーション表示する (SVG使用)
  8. マウスを重ねたら横棒グラフを順番にアニメーション表示する (SVG使用)
  9. マウスを重ねたら横棒グラフの色を変える (SVG使用)
  10. CSVファイルのデータを読み込んで一括で処理し横棒グラフを表示する (SVG使用)
  11. ボタンクリックで横棒グラフの内容を更新する (SVG使用)
  12. ボタンクリックで横棒グラフの内容をアニメーションしながら更新する (SVG使用)

積み上げ棒グラフ

  1. 積み上げ棒グラフを描く (SVG使用)

円

  1. データに応じたサイズの円を描く (SVG使用)
  2. 出現した順番に従って円の色を指定する (SVG使用)

円グラフ／パイチャート

  1. 円グラフを描く (SVG使用)
  2. 中心に穴が開いた円グラフを描く (SVG使用)
  3. 円グラフを色分けして表示する (SVG使用)
  4. 標準の10色で円グラフを色分けして表示する (SVG使用)
  5. 円グラフを角度0から360度までアニメーションさせながら描く (SVG使用)
  6. 中心に穴が開いた円グラフを角度0から360度までアニメーションさせながら描く (SVG使用)
  7. 色分けした円グラフを角度0から360度までアニメーションさせながら描く (SVG使用)
  8. デフォルトの色で色分けした円グラフを角度0から360度までアニメーションさせながら描く (SVG使用)
  9. デフォルトの色で色分けした円グラフを開始角度から360度までアニメーションさせながら描く (SVG使用)
  10. デフォルトの色で色分けした円グラフを一周させるアニメーションさせながら描く (SVG使用)
  11. 円グラフを描画する際にアニメーションの動きを指定する (SVG使用)

鶏頭図

  1. 鶏頭図を描く (SVG使用)
  2. 鶏頭図をアニメーションさせながら描く (SVG使用)

折れ線グラフ

  1. 折れ線グラフを描く (SVG使用)
  2. 折れ線グラフを2つ描く (SVG使用)
  3. 折れ線グラフを点線で描く (SVG使用)
  4. 折れ線グラフを階段状に描く (SVG使用)
  5. 折れ線グラフをBスプライン曲線で描く (SVG使用)
  6. 折れ線グラフを両側が開かれたBスプライン曲線で描く (SVG使用)
  7. 折れ線グラフをカーディナルスプライン曲線で描く (SVG使用)
  8. 折れ線グラフを両側が開かれたカーディナルスプライン曲線で描く (SVG使用)
  9. 折れ線グラフをMonotone cubic形式で描く (SVG使用)
  10. グリッドを描く (SVG使用)
  11. 塗り潰された折れ線グラフを描く (SVG使用)

散布図

  1. 散布図を描く (SVG使用)
  2. 散布図でデータに応じて大きさの違う円を描く (SVG使用)
  3. 散布図のシンボルの横に値を表示する
  4. 散布図で表示するシンボルを円にする (SVG使用)
  5. 散布図で表示するシンボルを十時マークにする (SVG使用)
  6. 散布図で表示するシンボルを菱形にする (SVG使用)
  7. 散布図で表示するシンボルを四角形にする (SVG使用)
  8. 散布図で表示するシンボルを下向きの三角形にする (SVG使用)
  9. 散布図で表示するシンボルを上向きの三角形にする (SVG使用)
  10. 散布図で表示するシンボルのサイズを指定する (SVG使用)
  11. 散布図のシンボルをアニメーションさせながら一斉に描く (SVG使用)
  12. 散布図のシンボルを1つずつアニメーションさせながら描く (SVG使用)

フォースレイアウト（力学レイアウト）

  1. フォースレイアウト（力学モデル）を使って描画する (SVG使用)
  2. ノードをドラッグできるようにする (SVG使用)
  3. ノード間の強さを指定する (SVG使用)
  4. ノードの重力を指定する (SVG使用)

ヒストグラム

  1. ヒストグラムを描く (SVG使用)
  2. 色付きのヒストグラムを描く (SVG使用)

バブルチャート／パックレイアウト

  1. 量を円のサイズで示したバブルチャートを描く（パックレイアウト） (SVG使用)
  2. バブルチャートの円に色を付ける (SVG使用)
  3. バブルチャートの円の中に文字を表示する (SVG使用)
  4. バブルチャートの円と円の間隔を指定する (SVG使用)
  5. バブルチャートの円のサイズを指定する (SVG使用)
  6. バブルチャートを円でなく四角形で描く (SVG使用)
  7. バブルチャートの円を指定したサイズになるようにアニメーションさせる (SVG使用)
  8. バブルチャートの円と文字を指定したサイズになるようにアニメーションさせる (SVG使用)
  9. バブルチャートの円を指定したサイズにアニメーションさせながら文字をフェードインさせる (SVG使用)

ツリー(ノード)

  1. ツリー(ノード)を描く (SVG使用)
  2. ツリーノードの階層の深さに応じて色を設定する (SVG使用)
  3. ツリーノードの階層の深さを表示する (SVG使用)
  4. ツリーノードの先に文字を表示する (SVG使用)

ツリーマップ

  1. ツリーマップを描く (SVG使用)
  2. ツリーマップに複数の情報（文字）を表示する (SVG使用)
  3. ツリーマップに独自の背景色を付ける (SVG使用)
  4. ツリーマップにd3.jsが用意した色で背景色を指定する (SVG使用)
  5. マップのブロック（領域）をクリックしたら値を表示する (SVG使用)
  6. マップのブロック（領域）にマウスを乗せたら背景色を変える (SVG使用)

地球／地図表示

    Aitoff（エイトフ）図法

  1. 地球を描画する【Aitoff（エイトフ）図法】 (SVG使用)
  2. 国境線を描画する【Aitoff（エイトフ）図法】 (SVG使用)
  3. 緯度経度の線を描画する【Aitoff（エイトフ）図法】 (SVG使用)
  4. ズームレベルを指定する【Aitoff（エイトフ）図法】 (SVG使用)
  5. 表示位置を指定する【Aitoff（エイトフ）図法】 (SVG使用)
  6. 地図を回転させる【Aitoff（エイトフ）図法】 (SVG使用)

    7. Airy（エアリー）

  7. 地球を描画する【Airy（エアリー）】 (SVG使用)
  8. 地図を回転させる【Airy（エアリー）】 (SVG使用)

    9. Armadillo（アルマジロ）

  9. 地球を描画する【Armadillo（アルマジロ）】 (SVG使用)
  10. 地図を回転させる【Armadillo（アルマジロ）】 (SVG使用)

    11. August（オーガスト）

  11. 地球を描画する【August（オーガスト）】 (SVG使用)
  12. 地図を回転させる【August（オーガスト）】 (SVG使用)

    13. Lambert Azimuthal Equal Area（ランベルト正積図法）

  13. 地球を描画する【Lambert Azimuthal Equal Area（ランベルト正積図法）】 (SVG使用)
  14. 地図を回転させる【Lambert Azimuthal Equal Area（ランベルト正積図法）】 (SVG使用)

    15. Azimuthal Equidistant Projection（正距方位図法）

  15. 地球を描画する【Azimuthal Equidistant Projection（正距方位図法）】 (SVG使用)
  16. 地図を回転させる【Azimuthal Equidistant Projection（正距方位図法）】 (SVG使用)

    17. Baker Dinomic

  17. 地球を描画する【Baker Dinomic】 (SVG使用)
  18. 地図を回転させる【Baker Dinomic】 (SVG使用)

    19. Berghaus Star図法

  19. 地球を描画する【Berghaus Star図法】 (SVG使用)
  20. 地図を回転させる【Berghaus Star図法】 (SVG使用)

    21. Boggs Eumorphic

  21. 地球を描画する【Boggs Eumorphic】 (SVG使用)
  22. 地図を回転させる【Boggs Eumorphic】 (SVG使用)

    23. Bonne（ボンヌ図法）

  23. 地球を描画する【Bonne（ボンヌ図法）】 (SVG使用)
  24. 地図を回転させる【Bonne（ボンヌ図法）】 (SVG使用)

    25. Bromley

  25. 地球を描画する【Bromley】 (SVG使用)
  26. 地図を回転させる【Bromley】 (SVG使用)

    27. Spherical Mercator（メルカトル図法）

  27. 地球を描画する【Spherical Mercator（メルカトル図法）】 (SVG使用)
  28. 緯度経度の線を描画する【Spherical Mercator（メルカトル図法）】 (SVG使用)
  29. 地図を移動（回転）させる【Spherical Mercator（メルカトル図法）】 (SVG使用)

    30. Orthographic（正射投影法）

  30. 地球を描画する【正射投影法（Orthographic）】 (SVG使用)
  31. 地図を回転させる【正射投影法（Orthographic）】 (SVG使用)
  32. 地球をリアルタイムに回転させる【正射投影法（Orthographic）】 (SVG使用)

D3関連リンク

  1. D3.js本家
  2. D3.js日本語ドキュメント
  3. D3 API Reference (英語)
  4. GUNMA GIS GEEK
  5. 【D3.js】作っておくと便利な関数達
  6. セレクションの仕組み
  7. JavaScriptのデータの可視化ライブラリ「D3.js」の紹介とライブラリを利用した棒グラフの作成
  8. D3.js を用いた棒グラフの作成 (2)
  9. D3.js を用いた棒グラフの作成 (3)
  10. D3.jsでtumblrのActivityみたいな折れ線グラフをシンプルに引く
  11. D3.js Geo(Geography) チュートリアル
  12. svg要素の基本的な使い方まとめ　20.D3.jsによるグラフの描画
  13. d3.layout とは？
  14. D3.jsとOpen Data〜その１地図を描画する
  15. D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう
  16. D3 Workshop
  17. TypeScriptとd3.js
  18. D3.jsで理解する世界の人口

D3関連リンク(ライブラリ／プラグイン等)

  1. Crossfilter
  2. dc.js
  3. NVD3
  4. D3 Maps
  5. D3.js プラグインまとめ
  6. Objective-Cのクラスの依存関係を「D3.js」でビジュアライズするライブラリ
  7. データビジュアライゼーションをはじめるためのフリーのツール・情報源20選

D3.js Advent Calendar

  1. D3.js Advent Calendar 2012
  2. D3.js Advent Calendar 2013

D3.jsに関する書籍

  1. Interactive Data Visualization for the Web [ペーパーバック]
  2. Interactive Data Visualization for the Web [Kindle版]
  3. Developing a D3.js Edge [Kindle版]
  4. Getting Started with D3 [Kindle版]
  5. Data Visualization with D3.js Cookbook [Kindle版]
  6. Data Visualization with d3.js [Kindle版]