2012/2/18 HTML5+WordBench勉強会 in 神戸HTML5-West.jp kadoppe
d3.jsではじめるデータビジュアライゼーション入門
1
目次
•1.データビジュアライゼーションとは
•2.d3.jsとは
•3.d3.jsを使う3つの理由
•4.d3.jsでつくるはじめての棒グラフ
•5.まとめ
2
自己紹介•名前:@kadoppe
•職業:エンジニア
• HTML5-West.jpコアメンバー
•Web全般 / スマフォアプリ
•厳選スタートアップPodcast『ばりスタッ!』
• http://about.me/kadoppe3
発表資料
•プレゼンスライド
• SlideShare - Kohei Kadowaki
•サンプルコード
• GitHub - kadoppe
4
目次
•1.データビジュアライゼーションとは
•2.d3.jsとは
•3.d3.jsを使う3つの理由
•4.d3.jsでつくるはじめての棒グラフ
•5.まとめ
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
目次
•1.データビジュアライゼーションとは
•2.d3.jsとは
•3.d3.jsを使う3つの理由
•4.d3.jsでつくるはじめての棒グラフ
•5.まとめ
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
目次
•1.データビジュアライゼーションとは
•2.d3.jsとは
•3.d3.jsを使う3つの理由
•4.d3.jsでつくるはじめての棒グラフ
•5.まとめ
14
•理由1:jQuery経験者ならすんなり使える
•理由2:データ/ドキュメント操作がカンタン
•理由3:データの表現形式を自由に選べる
d3.jsを使う3つの理由
15
理由1:jQuery経験者ならすんなり使える
• jQueryライクなインタフェース
• CSSセレクターによるオブジェクト参照
•メソッドチェーン
16
理由2:データ/ドキュメント操作がカンタン
•面倒なデータ/ドキュメント操作をカンタンにするAPI
• HTML要素に任意のデータ (JSON) を関連付け
•データの内容にもとづいてHTML要素の属性スタイルを変更
17
理由3:データの表現形式を自由に選べる
•データの表現形式は特に規定していない
•インラインSVG / HTML5 / CSS3 などブラウザの機能を直接利用
•ブラウザに新機能が搭載されればすぐ利用可能に
18
他にも
•スムーズなアニメーション
•ユーザーとのインタラクションのサポート
•豊富なドキュメント / サンプル
•活発なコミュニティ
19
目次
•1.データビジュアライゼーションとは
•2.d3.jsとは
•3.d3.jsを使う3つの理由
•4.d3.jsでつくるはじめての棒グラフ
•5.まとめ
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:新しいデータを追加してみる
•今からすること
•2年分の口座残高データを棒グラフに追加
•追加するデータ [ {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を使う3つの理由
• 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
Top Related