2012/2/18 HTML5+WordBench勉強会 in 神戸HTML5-West.jp kadoppe

d3.jsではじめるデータビジュアライゼーション入門

1

目次

•１．データビジュアライゼーションとは

•２．d3.jsとは

•３．d3.jsを使う３つの理由

•４．d3.jsでつくるはじめての棒グラフ

•５．まとめ

2

自己紹介•名前：@kadoppe

•職業：エンジニア

• HTML5-West.jpコアメンバー

•Web全般 / スマフォアプリ

•厳選スタートアップPodcast『ばりスタッ！』

• http://about.me/kadoppe3

発表資料

•プレゼンスライド

• SlideShare - Kohei Kadowaki

•サンプルコード

• GitHub - kadoppe

4

目次

•１．データビジュアライゼーションとは

•２．d3.jsとは

•３．d3.jsを使う３つの理由

•４．d3.jsでつくるはじめての棒グラフ

•５．まとめ

5

データビジュアライゼーションとは？

データ を 可視化 すること

6

わかりづらいデータ

7

そして退屈！

可視化することでわかりやすく

Wow! The foursquare community has over 10,000,000 members! | Foursquare Bloghttp://blog.foursquare.com/2011/06/20/holysmokes10millionpeople/

Chris Harrison - WikiViz: Visualizing Wikipediahttp://www.chrisharrison.net/projects/wikiviz/index.html

注）前頁のデータとこのビジュアライゼーションには関連性はありません8

可視化することの目的•人間のデータ理解を助けることが目的

•重要な情報だけに集中できるように

•重要なパターンや関連が見えるように

•最近流行りのインフォグラフィックもその仲間

• visual.ly http://visual.ly/

• infogr.am http://infogr.am/

なにより楽しい！個人差はありますが

9

目次

•１．データビジュアライゼーションとは

•２．d3.jsとは

•３．d3.jsを使う３つの理由

•４．d3.jsでつくるはじめての棒グラフ

•５．まとめ

10

•Webブラウザでデータビジュアライゼーションを実現するためのJavaScriptライブラリ

d3.jsとは

d3.js - http://mbostock.github.com/d3/

11

特徴•データに基づいてHTMLドキュメントを操作することにフォーカス

•きれいなルックアンドフィールももちろんサポート

ルックアンドフィール

データドキュメント操作

ビジュアライゼーション＋ ＝

12

DEMO

d3.js ~ Voronoi Diagramhttp://mbostock.github.com/d3/ex/voronoi.html

d3.js ~ Force-Directed Graph http://mbostock.github.com/d3/ex/force.html

13

目次

•１．データビジュアライゼーションとは

•２．d3.jsとは

•３．d3.jsを使う３つの理由

•４．d3.jsでつくるはじめての棒グラフ

•５．まとめ

14

•理由1：jQuery経験者ならすんなり使える

•理由2：データ/ドキュメント操作がカンタン

•理由3：データの表現形式を自由に選べる

d3.jsを使う３つの理由

15

理由1：jQuery経験者ならすんなり使える

• jQueryライクなインタフェース

• CSSセレクターによるオブジェクト参照

•メソッドチェーン

16

理由2：データ/ドキュメント操作がカンタン

•面倒なデータ/ドキュメント操作をカンタンにするAPI

• HTML要素に任意のデータ (JSON) を関連付け

•データの内容にもとづいてHTML要素の属性スタイルを変更

17

理由3：データの表現形式を自由に選べる

•データの表現形式は特に規定していない

•インラインSVG / HTML5 / CSS3 などブラウザの機能を直接利用

•ブラウザに新機能が搭載されればすぐ利用可能に

18

他にも

•スムーズなアニメーション

•ユーザーとのインタラクションのサポート

•豊富なドキュメント / サンプル

•活発なコミュニティ

19

目次

•１．データビジュアライゼーションとは

•２．d3.jsとは

•３．d3.jsを使う３つの理由

•４．d3.jsでつくるはじめての棒グラフ

•５．まとめ

20

d3.jsでつくるはじめての棒グラフ•実際にコードをかきながら説明します (Live Coding?)

•目標

• d3.jsを使ったコーディングの感覚をつかむこと

•注意点

•データ/ドキュメント操作に焦点 (見た目は無視)

•詳細な説明はリファレンスにお任せ21

実現したいこと• kadoppeの年度別口座残高データ（架空）を棒グラフに視覚化

[ {year: 2007, account: 200}, {year: 2008, account: 250}, {year: 2009, account: 300}]

200

250

300

22

用意するもの

• d3.jsのライブラリ

•お気に入りのWebブラウザ

• IE9, Firefox, Chrome, Safari, Opera

•お気に入りのテキストエディタ

23

制作手順

• Step1：d3.jsを使わずに適当な棒グラフを作ってみる

• Step2：d3.jsを使って適当な棒グラフを作ってみる

• Step3：データを棒グラフに反映させてみる

• Step4：新しいデータを追加してみる

• Step5：古いデータを削除してみる

24

制作手順

• Step1：d3.jsを使わずに適当な棒グラフを作ってみる

• Step2：d3.jsを使って適当な棒グラフを作ってみる

• Step3：データを棒グラフに反映させてみる

• Step4：新しいデータを追加してみる

• Step5：古いデータを削除してみる

25

Step1：d3.jsを使わずに適当な棒グラフを作ってみる

•今からすること

• HTMLとCSSを使って棒グラフをとりあえず作成

• d3.jsはまだ使いません

•データはまだ使いません

26

コーディングスタート

27

解説• HTMLエレメントの構造

div.chart

300div

200div

100div

28

制作手順

• Step1：d3.jsを使わずに適当な棒グラフを作ってみる

• Step2：d3.jsを使って適当な棒グラフを作ってみる

• Step3：データを棒グラフに反映させてみる

• Step4：新しいデータを追加してみる

• Step5：古いデータを削除してみる

29

Step2：d3.jsを使って適当な棒グラフを作ってみる

•今からすること

• d3.jsを使ってStep1でつくった棒グラフを再現

•データはまだ使いません

30

コーディングスタート

31

解説

• jQueryライクなインタフェース

• d3.selectAll(‘.chart’) → $(‘.chart’)に対応

• Selectionオブジェクト → jQueryオブジェクトに対応

// CSSセレクターを使って「Selectionオブジェクト」を取得 var chart = d3.selectAll('.chart');

// メソッドチェーン chart.append('div').style('width','200px').text('200');

32

制作手順

• Step1：d3.jsを使わずに適当な棒グラフを作ってみる

• Step2：d3.jsを使って適当な棒グラフを作ってみる

• Step3：データを棒グラフに反映させてみる

• Step4：新しいデータを追加してみる

• Step5：古いデータを削除してみる

33

Step3：データを棒グラフで表現してみる

•今からすること

•口座残高にもとづいて棒グラフの横幅を変更

•口座残高にもとづいて棒グラフの数値表示を変更

•使用するデータ [ {year: 2007, account: 200}, {year: 2008, account: 250}, {year: 2009, account: 300}]

34

コーディングスタート

35

解説

• data()

• HTML要素にデータ（配列形式）を関連付け

• style() / text()

•引数に関数を受け取ることで、データの内容にもとづいた属性/スタイルの変更が可能

// '.chart div'に対してデータを関連付けchart.selectAll('div').data(data)

.style('width', function(d) { return d.account + "px";})

36

制作手順

• Step1：d3.jsを使わずに適当な棒グラフを作ってみる

• Step2：d3.jsを使って適当な棒グラフを作ってみる

• Step3：データを棒グラフに反映させてみる

• Step4：新しいデータを追加してみる

• Step5：古いデータを削除してみる

37

Step4：新しいデータを追加してみる

•今からすること

•２年分の口座残高データを棒グラフに追加

•追加するデータ [ {year: 2010, account: 250}, {year: 2011, account: 20}]

38

コーディングスタート

39

解説• enter().append()

•まだHTML要素に関連付けられていないデータに対して新しいHTML要素を関連付け

chart.selectAll('div').data(data) .enter().append('div')

200

250

300250300

200

250

300

25040

少しリファクタリング

41

制作手順

• Step1：d3.jsを使わずに適当な棒グラフを作ってみる

• Step2：d3.jsを使って適当な棒グラフを作ってみる

• Step3：データを棒グラフに反映させてみる

• Step4：新しいデータを追加してみる

• Step5：古いデータを削除してみる

42

Step5：古いデータを削除してみる

•今からすること

•さらに1年分の口座残高データを棒グラフに追加

•古い1年分のデータを棒グラフから削除

43

コーディングスタート

44

解説• exit().remove()

•データが関連付けられていないHTML要素を削除

selection.exit().remove();

250

300

250

250

300

250

45

製作終了

•使ったメソッド

• selectAll(), append(), data(), style(), text(), enter(), exit(), remove()

•これだけでデータ/ドキュメント操作はほぼマスター

•あとはルックアンドフィールを付け加えるだけ

46

目次

•データビジュアライゼーションとは

• d3.jsの概要

• d3.jsを使う３つの理由

• d3.jsでつくるはじめての棒グラフ

•まとめ

47

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

•わかりづらいデータを理解しやすい形に可視化

• d3.js

•ブラウザ上でデータビジュアライゼーションを実現

•面倒なデータ/ ドキュメント操作がカンタンに

まとめ

48

退屈なデータを d3.js で楽しく

• d3.jsについて

• d3.js - http://mbostock.github.com/d3/

• APIリファレンス、チュートリアル、Exampleなど（英語）

• レイアウトやアニメーションなどを次に学習すると表現の幅が広がる

• d3-js | Google グループ - http://groups.google.com/group/d3-js

• メーリングリスト。投稿がかなり多い（英語）

• ウォッチしておくといつか役に立つかも

• データビジュアライゼーションについて

• デビッド・マキャンドレス 「データビジュアライゼーションの美」 | Video on TED.comhttp://www.ted.com/talks/lang/ja/david_mccandless_the_beauty_of_data_visualization.html

• 素晴らしい講演

さらに勉強したい方へ

49

おしまい

50