D3.js講習会〜３回目〜

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

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

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

4. 本日の内容

5. Today s Goal

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

7. 実際にやってみよう！
• 編集箇所：41行目∼
• 以下のフローに分割してやっていきます
• フロー１：Scaleの設定
• フロー２：Axisの設定して呼び出し

8. フロー１

9. Scale ?
• D3.js の Scale の定義
• 入力 Domain を出力 Range にマップする関数
• Domain : 領域
• Range : 範囲
• マップする：変換する
Domain RangeMapping

10. Example
30 60
0 100

11. Example
30 60
0 100
Domain
Range
Mapping

12. Try it !
yScale = d3.scale.linear()
• linear() は線形にマップするという意味

13. Try it !
yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
• linear() は線形にマップするという意味
※domainの設定

14. Try it !
yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([svgHeight - paddingTop,
paddingBottom]);
• linear() は線形にマップするという意味
※rangeの設定

15. あと，もう１個！
• 60 行目と66 行目の d * 10 を yScale(d) に変更
• 表示領域に合わせて棒グラフの表示を行うようにするため
!
• 生成した Scale を格納した変数を使えば，
与えた値に対してマップしてくれる

16. フロー2

17. Axis ?
• D3.jsにおける軸を生成するための関数
• Scale と表示位置を設定して表示するだけでOK

18. Try it !
yAxis = d3.svg.axis()
• まずは，軸の生成を行う

19. Try it !
yAxis = d3.svg.axis()
.scale(yScale)
• まずは，軸の生成を行う
※軸で使用する Scale の設定

20. Try it !
yAxis = d3.svg.axis()
.scale(yScale)
.orient('left');
• まずは，軸の生成を行う
※軸から見てどこに表示するか

21. Try it !
• 次に，軸の表示を行う
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + svgWidth + ', 0)')
.call(yAxis);
※callを使って Axis を呼び出している

22. すると…

23. 完成！

24. 今日のポイント
Scale, Axis

25. D3.js講習会は終わり
お疲れ様でした！

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