2014年9月 秋のJavascript祭り　でのプレゼン資料です。 D3.jsを使って、データビジュアライゼーションの説明と使い方を説明しました。 D3.jsは学習コストが高いですが、非常に細かく、高度なビジュアル表現できます。 人口統計データを活用して、東京23区の人口情報の動きを作ってみました。 http://www.slideshare.net/YoshinoriKoba/d3js-38787078 個人的には、次の３つポイントだと思います。 １．メソッドチェーン 　jQuery とよく似ていて、D3.jsでは多用される。 ２．スケール（縮尺） 　 実データの分布を、実際の描画位置にマッピングする。 ３．Dataメソッド 　 データを保存して、１つずつ取り出しができるようにする 今回デモサイトを作成してみて、思い通りうごくまでなかなか時間がかかりました。 D3.ｊｓの独特のお作法があるので、これを理解しないとどのようにコードしたらわらかない。 あと、jQueryと同様のことができるので、実際の制作では、セレクタやセットをjQueryで行うのか、D3.jsで混乱する場面があります。 極力、D3.jsで行い、できないことをｊQueryで行うのがよいかなという印象です。

1. D3.jsでのデータビジュアライゼーション
-人口統計データから使い方を学ぶ-
Ticklecode.
Yoshinori Kobayashi
秋のJavascript祭り2014.09.07
1

2. 生まれは奈良県です。
小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
2

3. 今回、デモで使用しているデータについて

4. 東京都の統計住民基本台帳による東京都の世帯と人口
今回のデータ引用元
http://www.toukei.metro.tokyo.jp/juukiy/jy-index.htm

5. 東京都が掲載しているデータは著作権の対象！
必ず、「引用」する必要がる。
引用とは権利者に無断で行われるもので、権利者は引用を拒否することはできない
http://www.metro.tokyo.jp/SUB/copyright.htm

6. 東京都の統計データはオープンデータではない！
オープンデータの定義
特定のデータが、一切の著作権、特許などの制御メカニズムの制限なしで、全ての
人が望むように利用・再掲載できるような形で入手できるべきであるというアイデア
http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3
%83%87%E3%83%BC%E3%82%BF

7. デモサイト
住民基本台帳による東京都23区の平均年齢、人口密度、人口の分布
http://ticklecode.com/present/140907_js_autumn_festival_d3js/

8. D3.js
公式サイト： http://d3js.org/

9. D3.js Browser Support
http://caniuse.com/#search=svg
SVGが前提となる

10. D3.jsのライセンス
BSDライセンスが定めることは、「無保障」かつ「免責」であることを宣言
すること、著作権表示を消さないこと
http://ja.wikipedia.org/wiki/BSD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B
3%E3%82%B9
http://opensource.org/licenses/BSD-3-Clause

11. D3.js 概要
Data Driven Documents
Data ・・・json、XML、csv
Driven ・・・運転する、動かす→ データ駆動型
Documents ・・・HTML、SVG、DOM

12. Data（JSON、XML、CSV）
Documents（SVG）
Driven
データの動きに合わせて、SVGを出力。
Bind（関連付け）を行う。
D3.js の基本的な流れ

13. Data Driven （データ駆動型）なので・・・
Ex. Data を2001年⇒ 2014年へ変更すると

14. Data Bind （連動）しているので、
プログラムの修正なしに・・・

15. Documents 2001年⇒ 2014年のグラフに変わる

16. D3.js を理解する上で、必要な基本要素
１．メソッドチェーン
２．スケール（縮尺）
３．Dataメソッド

17. １．メソッドチェーン
jQuery とよく似ていて、D3.jsでは多用される。
前回のメソッドの結果が、次のメッソッドの入力値になる。
textタグを選択
データセット
追加分の取り出し
textタグを追加
text（文字）を設定
x座標の指定
y座標の指定

18. ２．スケール（縮尺）
実データの分布を、実際の描画位置にマッピングする。
domain：入力データ
Min:39.20 Max:45.73
range：出力域
Min:20
Max:800
Ex. 平均年齢の場合

19. スケール（縮尺）の例
domain：入力データの最小値、最大値を指定
d3.min で、データの最小値を取得、
d3.max で、データの最大値を取得できる！
range：出力領域の最小値、最大値を指定

20. ３．Dataメソッド
データを保存して、１つずつ取り出しができるようにする

21. svg.selectAll(“circle”)
.data(dataset)
・・・・
__data__ へデータが保存されている

22. 取り出したデータは、メソッドチェーン内ではd で利用できる。
入力データを取得して、演算（function）して、グラフに表示することが
できるので、複雑なグラフ描画も行える。

23. まとめ

24. ・理解するまで学習コストがかかる。
→簡単なグラフならjqPlotプラグイン、
Google Charts API のほうが制作が早い。
・1ずつのデータに対して、演算(function)できるので
かなり高度なビジュアルが行える
・他のjsライブラリとの組み合わせができる。
→Three.js、TopoJSON（Map）など。

25. ご清聴ありがとうございました。