D3.js講習会用のスライド

1. D3.js講習会
∼１回目∼

2. Githubから
D3js_lecture
をダウンロードしてね

3. 使用環境は
Google Chrome
Sublime Text 2

4. D3.js講習会について
• 講習会の目的
• D3.jsのコードを理解して，
自分のシステムに導入できるようにすること
• 全３回を予定
• １回目：D3.jsとは何か？ 棒グラフを作ろう！
• ２回目：update, enter, exit？
データの追加／削除をしてみよう！
• ３回目：棒グラフに軸を設定してみよう！

5. 本日の内容

6. 本日のゴール

7. D3.js
• JavaScript用のデータ視覚化ライブラリ
• Data Driven Document (D3) の略

8. Data Driven？

9. Data Driven
• D3.jsで採用されている Data Driven
• e.g., データを与える → グラフを描画
!
• みんながよく使用してるのは Event Driven
• e.g., ボタンをクリック → ページが遷移する

10. Data Driven
• みんながよく使用してるのは
• e.g., ボタンをクリック → ページが遷移する
!
• D3.jsで採用されている
• e.g., データが与える →
Data Driven Document とは，
与えられたデータによって文書を操作する形態のこと

11. 実際にやってみよう！
• D3js_lecture/01/step01.html を開いてください

12. 実際にやってみよう！
• D3js_lecture/01/step01.html を開いてください

13. bodyの中には
htmlタグがない！

15. このコードが
pタグを生成

16. 練習
• 1. datasetに値を２つ追加してみよう！
• 2. datasetの値を１つだけにしてみよう！

17. 練習
• 1. datasetに値を２つ追加してみよう！
• 2. datasetの値を１つだけにしてみよう！
Answer
Answer

18. ソースコードの解析
使用するデータ(Array)
pタグを生成している
D3.jsのコード

19. ソースコードの解析
d3.select( body ) bodyを選択

20. ソースコードの解析
d3.select( body )
.selectAll( p )
!
!
!
bodyを選択
その中のpタグを全て選択
※現在は存在しない

21. ソースコードの解析
d3.select( body )
.selectAll( p )
.data(dataset)
!
!
bodyを選択
その中のpタグを全て選択
pタグにdatasetを
バインディング
※今日のチェックポイント

22. データバインディング
• 与えたデータ (e.g., dataset) を
要素（e.g., pタグ）に結合すること
※ブラウザのコンソールを開いてください

23. ソースコードの解析
d3.select( body )
.selectAll( p )
.data(dataset)
.enter()
.append( p )
.text( New paragraph! );
bodyを選択
その中のpタグを全て選択
pタグにdatasetを
バインディング
] pタグをデータ数分追加
表示するテキスト
※selectAll，enter，appendは次回詳しくやります

24. 与えられた (データ) によって (pタグ) を (生成) する
ソースコード

25. 与えられた (データ) によって (pタグ) を (生成) する
ソースコード

26. 棒グラフを作ってみよう！

27. 棒グラフを作ってみよう！
• D3js_lecture/01/step02.html を開いてください
• BarChartメソッドの中を編集していきます

28. 棒グラフの作成フロー
1. 棒グラフを作成するためのグラフィック表示
ツール（SVG）を使用する
2. SVGを使用して棒(四角形)をデータ数分作る
3. SVGを使用してラベルをデータ数分作る

29. 棒グラフの作成フロー
1. 棒グラフを作成するためのグラフィック表示
ツール（SVG）を使用する
2. SVGを使用して棒(四角形)をデータ数分作る
3. SVGを使用してラベルをデータ数分作る

30. フロー1(SVGの作成)
var svg = d3.select( body )
.append( svg )
.attr( width , svgWidth)
.attr( height , svgHeight);
• SVGを使用する際のお約束
• attrは属性の指定 (e.g., <img width= 100 … />)

31. フロー2(棒の作成)
svg.selectAll('rect')
!
!
!
!
!
!
!
!

32. フロー2(棒の作成)
svg.selectAll('rect')
.data(dataset)
!
!
!
!
!
!
!
データのバインディング

33. フロー2(棒の作成)
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
!
!
!
!
!
データ数分の四角形を作成

34. フロー2(棒の作成)
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('width', function(d, i) {
return svgWidth / dataset.length - paddingX;
})
!
!
.attr('width', function(d, i) {
return svgWidth / dataset.length - paddingX;
})
棒の幅を設定

35. フロー2(棒の作成)
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('width', function(d, i) {
return svgWidth / dataset.length - paddingX;
})
!
!
.attr('width', function(d, i) {
return svgWidth / dataset.length - paddingX;
})
※コールバック関数で動的に幅を設定
d : datasetのデータが順番に入る
i：現在参照しているデータのインデックス

36. フロー2(棒の作成)
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('width', function(d, i) {
return svgWidth / dataset.length - paddingX;
})
!
!
.attr('width', function(d, i) {
return svgWidth / dataset.length - paddingX;
})
.attr('height', function(d) {
return d * 10;
})
※コールバック関数で動的に幅を設定
d : datasetのデータが順番に入る
i：現在参照しているデータのインデックス

37. フロー2(棒の作成)
.attr('x', function(d, i) { // x座標
return svgWidth / dataset.length * i;
})
.attr('y', function(d) { // y座標
return svgHeight - d * 10;
})
.attr('fill', 'teal');

38. フロー３(ラベルの作成)
• フロー２がきちんと理解できればOK
• フロー３も基本的にやっている事は，フロー２と同じ

39. って，ことで

40. 完成！

41. 今日のポイント
データバインディング

42. 次週は
update, enter, exit
について学びます

43. 参考資料
• ドットインストール：SVG入門
• http://dotinstall.com/lessons/basic_svg
• ドットインストール：D3.js入門
• http://dotinstall.com/lessons/basic_d3js
• Scott Murray, 長尾高弘(訳): インタラクティブ・
データビジュアライゼーション, オライリー・ジャッパン