D3.js と SVG によるデータビジュアライゼーション
-
Upload
kohei-kadowaki -
Category
Technology
-
view
10.917 -
download
0
description
Transcript of D3.js と SVG によるデータビジュアライゼーション
D3.jsとSVGによるデータビジュアライゼーション2013/3/23 第6回 HTML5など勉強会 - kadoppe
自己紹介
名前:門脇 恒平 @kadoppe職業:ソフトウェアエンジニア所属:HTML5-West.jp コアメンバShareWis Inc. CTO
スライド:http://www.slideshare.net/kadoppe
サンプルコード:https://github.com/kadoppe/html5etc-6
データビジュアライゼーション?
データビジュアライゼーション?
そのまんまの意味
データビジュアライゼーション?
可視化
データを可視化すること
何のために?
身近な例
http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
どんな駅・路線が存在してどう繋がっているのか複雑なデータをわかりやすく伝えている
Web上の例
Before
Before
誰が/いつ/どれくらい貢献してるのか知りたいでもわかりづらい
After
After
目的:わかりにくいデータをわかりやすく整形
もっと勉強したい人は
http://www.ted.com/talks/lang/ja/david_mccandless_the_beauty_of_data_visualization.html
1年前の僕:僕もWeb上でこんなの作ってみたい
1年前の僕:でも難しそうどう作ればいいの?
D3.jsとSVGを使えばできるよ
D3 = Data-DrivenDocument
データにもとづいてHTMLドキュメントを構築するJavaScriptライブラリ
特徴1:豊富なドキュメントサンプルコード
http://bl.ocks.org/mbostock/4061961
http://bost.ocks.org/mike/fisheye/
特徴2:HTML要素やSVG要素を同じように扱える
SVG = Scalable Vector Graphics
XML形式のベクター画像フォーマット
特徴1:HTML文書に埋め込める(インラインSVG)
<html><head></head><body> <h1>SVG画像</h1> <svg> <circle cx=50 cy=50 r=50 /> </svg></body></html>
特徴2:JavaScriptやCSSから操作できる
実際に触ってみよう
Twitterのデータを可視化してみる
ライブコーディングその1:
ツイートリストを表示する
https://github.com/kadoppe/html5etc-6/tree/master/sample1
おさらい
var li = d3
d3: jQueryの$にあたるもの
var li = d3.select('#tweets')
select(): ツイートリストを格納する要素を指定
var li = d3.select('#tweets').selectAll("li")
selectAll(): 個々のツイートを格納する要素を指定
var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id });
data(): データの配列とキーとなる属性を指定
var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id });
li.enter()
enter(): ここから先は追加されたデータの処理
var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id });
li.enter().append('li')
append(): 追加データに要素を割り当てる
var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id });
li.enter().append('li') .text(function(data) { return data.text; });
text(): 要素内のテキストを指定する
var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id });
li.enter().append('li') .text(function(data) { return data.text; });
li.exit()
exit(): ここから先は削除されたデータの処理
var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id });
li.enter().append('li') .text(function(data) { return data.text; });
li.exit().remove();
remove(): データに割り当てられた要素を削除
var li = d3.select('#tweets').selectAll("li") .data(results, function(data) { return data.id });
li.enter().append('li') .text(function(data) { return data.text; });
li.exit().remove();
完成!
次はもうすこしビジュアライゼーション()っぽいことを
ライブコーディングその2:
SVGをつかうhttps://github.com/kadoppe/html5etc-6/tree/master/sample2
おさらい
var svg = d3.select('#tweets').selectAll("circle") .data(results, function(data) { return data.id });
SVG要素が使える
var svg = d3.select('#tweets').selectAll("circle") .data(results, function(data) { return data.id });
svg.enter().append('circle') .attr('r', 10)
attr(): 要素の属性値を指定
var svg = d3.select('#tweets').selectAll("circle") .data(results, function(data) { return data.id });
svg.enter().append('circle') .attr('r', 10) .attr('cx', function(data) { return data.text.length * 3 })
データの内容から属性値を計算できる
var svg = d3.select('#tweets').selectAll("circle") .data(results, function(data) { return data.id });
svg.enter().append('circle') .attr('r', 10) .attr('cx', function(data) { return data.text.length * 3 }) .attr('cy', function(data) { var d = new Date(); d.setTime(Date.parse(data.created_at)); return d.getHours() * 20; });
もちろん複雑な計算も可能
var svg = d3.select('#tweets').selectAll("circle") .data(results, function(data) { return data.id });
svg.enter().append('circle') .attr('r', 10) .attr('cx', function(data) { return data.text.length * 3 }) .attr('cy', function(data) { var d = new Date(); d.setTime(Date.parse(data.created_at)); return d.getHours() * 20; });
完成!
まだ時間ある?
ライブコーディングその3:Layoutモジュールをつかう
https://github.com/kadoppe/html5etc-6/tree/master/sample3
カンタンに見栄えが良くなる
Bundle Chord
Force Cluster
Bundle Chord
Force Cluster
おさらい
var force = d3.layout.force()
layout.force(): forceレイアウトを使う準備
var force = d3.layout.force() .nodes(nodes)
nodes(): 表示するノードを設定
var force = d3.layout.force() .nodes(nodes) .links(links)
links(): ノード間の接続を設定
var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick)
.on(“tick”, function): 周期的に実行する処理を指定
var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500])
.size(): 表示する領域のサイズを指定
var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500]) .start();
.start(): ノード位置の自動計算をスタート
var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500]) .start();
完成!
まとめ
データビジュアライゼーション
データをわかりやすく可視化すること
D3.js
データにもとづいてHTMLを組み立てられる
HTMLとSVGが使える
カンタンに見栄え良くできる
こんな僕でも・・
Let’s Try !!
おしまい