0
D3.jsを
使ってみよう
2014/08/28
@muddydixon
GTUG Girls Meetup #18
! muddydixon
" muddy.dixon
# muddydixon
!
Node.js
Perl
Visualization
TimeSeries
NeuralNetwork
私 is
アジェンダ
D3.jsとは
D3.jsの流れ
D3.jsのサンプル紹介
D3.js ハンズオン
散布図
棒グラフ
折線グラフ
グラフの可視化
データ可視化とは
The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effec...
今日の資料です
https://github.com/muddydixon/
GTUGGIRLSTOKYO20140828
D3.jsとは
D3.jsとは
キラキラ 乙
D3.jsとは
Data Driven Documents
inline SVG
https://developer.mozilla.org/ja/docs/
SVG_In_HTML_Introduction
複合ライブラリ
SVG 操作
数値...
D3.jsとは D-D-D
[
53434,
28397,
41334
]
図形化
D3.jsとは D-D-D
[
53434,
28397,
41334
]
[
1,
0.53,
0.77
]
正規化
D3.jsとは D-D-D
[
53434,
28397,
41334
]
[
1,
0.53,
0.77
]
正規化 図形化
D3.jsとは D-D-D
[
53434,
28397,
41334
]
[
1,
0.53,
0.77
]
正規化 図形化
Data Driven
Documents
D3.jsとは D-D-D
# Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1 5.1 3.5 1.4 0.2 setosa
2 4.9 3.0 1.4 0.2 setos...
D3.jsとは D-D-D
# Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1 5.1 3.5 1.4 0.2 setosa
2 4.9 3.0 1.4 0.2 setos...
D3.jsとは D-D-D
# Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1 5.1 3.5 1.4 0.2 setosa
2 4.9 3.0 1.4 0.2 setos...
D3.jsとは SVG
SVG: Scalable Vector Graphics
!
!
!
!
!
HTML5で「inline SVG」が利用可能に!
htmlにsvg(xml)を埋め込んで利用可能!
http://www.slidesha...
D3.jsとは SVG
<html>
<head>略</head>
<body>
<svg width=200 height=200>
<circle cx=100 cy=100
r=50 fill=red />
</svg>
</body>
<...
D3.jsとは SVG
<html>
<head>略</head>
<body>
<svg width=200 height=200>
<circle cx=100 cy=100
r=50 fill=red />
</svg>
</body>
<...
D3.jsとは SVG
<html>
<head>略</head>
<body>
<svg width=200 height=200>
<circle cx=100 cy=100
r=50 fill=red />
</svg>
</body>
<...
D3.jsとは SVG
XMLでかける!
アニメーションに強い!
Inspectorで見られる!
拡大縮小に強い!
反対に
WebGL で 3D に!
平面の描画を高速に行える!
面積が決まっていれば一定のパフォーマンス
画像フォーマットで保存...
D3.jsの流れ
D3.jsの流れ
データ作る
SVGの準備をする
DOMとデータを比較する
足りない部分をデータからDOMを生成
attrをいじる
サンプルで説明
D3.jsの流れ 0. HTML
基本はこれでずっといきます
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js on GTUG Girls Tokyo</titl...
D3.jsの流れ 0. Web
Web上げておくとAjaxとかも使えて便利です
python -m http.server 5000
python -m SimpleHTTPServer 5000
plackup -MPlack::App::D...
D3.jsの流れ 1. データ
データを作ります
こういうの作っておくと便利
// データ生成ユーティリティ
var dataGenerator = function(len, gen){
var array = [], i = 0;
for(...
D3.jsの流れ 2. SVG
土台(svg)作り
//
var svg = d3.select("body").append("svg")
.attr({width: WIDTH, height: HEIGHT});
var main = s...
D3.jsの流れ 3. データとDOMの紐付け
データの紐付け
var circle =
// 現状の取得
main.selectAll("g.circle")
// データのヒモ付
.data(data)
// データ > 現状(DOM)の部...
D3.jsの流れ 4. データからドキュメント
データからの要素属性
circle.append("circle").attr({
r: 10,
cx: function(d){ return d.x; },
cy: function(d){ ...
D3.jsの流れ 5. color
色を取得してみよう
var color = d3.scale.category20();
circle.append("circle").attr({
r: 10,
cx: function(d){ retu...
D3.jsの流れ
データ作る
SVGの準備をする
DOMとデータを比較する
足りない部分をデータからDOMを生成
attrをいじる
Selection
紐付けたデータ既存のDOM
.exit()
selection
.enter()
Selection (例えば)
紐付けたデータ既存のDOM
.exit()
selection
.enter()
属性・スタイル・テキ
ストの変更などを行う
新規にDOMを追加
し、同時に属性・スタ
イル・テキストをセッ
トする
既存のDOMを...
D3.jsで棒グラフ
棒グラフ
新しい話
d3.scale.ordinal
scale.rangeBands
scale.domain
d3.scale.linear
scale.range
d3.extent / d3.min / d3.max
d3.svg.ax...
棒グラフ
データ作成
// データ生成
var data = dataGenerator(10, function(i){
return {
id: i,
name: "name "+ i,
// height よりも大きい!
y: 0|Mat...
棒グラフ
データ整理
アクセサを指定することで、配列から柔軟
に最大・最小・範囲を取り出せる
他にも平均とか中央値なども可能
// データの調査
var min = d3.min(data, function(d){ return d.y;})...
棒グラフ
スケール作成: 超重要!scaleを制すこと必須
var x = d3.scale.ordinal()
.domain(data.map(function(d){ return d.id; }))
.rangeBands([0, wi...
棒グラフ
scaleのrangeが[0,height]ではなく
[height,0]だった理由
ブラウザ上では左上が(0,0)
右に行けば(x,0)、下に行けば(0,y)
大きい値ほど「高い」=「小さい値」
高さのほうを調整=「height -...
棒グラフ
要素の描画の準備
var bar =
// 現状の取得
main.selectAll("g.bar")
// データのヒモ付
.data(data)
// データ > 現状(DOM)の部分を取得
.enter()
// "g"要素を追...
棒グラフ
要素の描画の準備
var bar =
// 現状の取得
main.selectAll("g.bar")
// データのヒモ付
.data(data)
// データ > 現状(DOM)の部分を取得
.enter()
// "g"要素を追...
棒グラフ
要素の描画
bar.append("rect").attr({
width: x.rangeBand(),
height: function(d){ return height - y(d.y); },
y: function(d){...
棒グラフ
軸の作成
var xaxis = main.append("g").call(d3.svg.axis().scale(x)).attr({
"class": "axis",
transform: "translate(0,"+heig...
閑話休題 SVG 要素
SVGで使えるタグ
svg
g
defs, symbol, use
path, line, rect, circle
ellipse, polyline, polygon
!
あとはフィルター周りがたくさんありますが
ほとんど使う機会はありません
SVG, G
SVG
このタグは無いと始まりません!必ず作ります
G
子要素をグループ化することができます。
例えば「棒とラベル」の位置を同時に変えるには
G要素の位置を制御すれば一度で行えますし、ア
ニメーションの時も手間が減ります
ともにw...
PATH
すべての描画要素(graphics element)はこれのalias
だと考えることができます
d属性でデータパス文字列を渡すことで描画させます
e.g. M 100 100 L 300 100 L 200 300 z
(100,1...
CIRCLE, RECT, LINE, ELLIPSE
circle要素
r属性: 半径を指定
cx/cy属性: 中心のx/y座標を指定
rect要素
width/height属性: 矩形の幅/高さを指定
x/y属性: 矩形の左上の位置を指定
...
Transform属性
transform属性には文字列で下記を指定する
ことができます
matrix: 変形行列(5要素)を指定
translate: 並行移動 e.g. transform(X,Y)
rotate: 回転 e.g. rota...
D3.jsで折線グラフ
折線グラフ
新しい話
d3.time.scale
selection.datum
d3.svg.line
データ作成
// データ生成
var data = dataGenerator(10, function(i){
var now = Date.now();
return {
id: i,
name: "name "+ i,
x: new Da...
スケール作成
// スケールの生成
var x = d3.time.scale()
.domain(d3.extent(data, function(d){ return d.x; }))
.range([0, width]),
y = d3....
要素描画ユーティリティ
var line = d3.svg.line()
.x(function(d){ return x(d.x); })
.y(function(d){ return y(d.y); });
// PATHDATA=line...
描画
var serie =
// 現状の取得
main.append("path")
// データのヒモ付
.datum(data)
.attr({
d: line,
fill: "none",
stroke: color(0)
});
初出...
データの準備(オブジェクトの配列の配列)
// データ生成
var series = dataGenerator(3, function(i){
return {
name: "series " + i,
data: dataGenerator...
データの範囲を取得(2回 min/maxを使う)
var maxY = d3.max(series, function(serie){
return d3.max(serie.data, function(d){ return d.y;}); ...
紐付けて描画
var serie =
// 現状の取得
main.selectAll("g.serie")
// データのヒモ付
.data(series)
.enter()
.append("g").attr({"class": "serie...
One more thing
各ポイントにドットと数値を
var serie =
// 現状の取得
main.selectAll("g.serie")
// データのヒモ付
.data(series)
.enter()
.append("g")...
紐付けて描画
var point = serie.selectAll("g.point")
.data(function(d){ return d.data;}).enter()
.append("g").attr({
"class": "po...
Animation
selection.transition()につづいて.attr
を指定することで現在->指定したattrへの
アニメーションが行われます
e.g.
d3.select( circle ).transition().att
r({fill: gr...
Animation
更新処理関数(前半)
var updateLine = function(){
// スケールのドメイン更新
x.domain(d3.extent(data, function(d){ return d.x; }));
va...
Animation
更新処理関数(中盤)
// 新たにデータが増えたのでselection撮り直し
var point = main.selectAll("g.point").data(data);
// データ追加分の処理
var newpo...
Animation
更新処理関数(後半)
// 軸の更新
xaxis.call(d3.svg.axis().scale(x));
yaxis.call(d3.svg.axis().scale(y).orient("left"));
};
Layout
Layoutとは
再利用可能なアルゴリズムの塊
基本的には「元データ」から「ある可視化
表現に必要なデータ」への変換プログラム
+αでアニメーションやイベントなどがつい
てくる
キラキラ 乙
Layout
シャレオツな可視化を作るには、たくさん
の変数が必要です
例えば、関係グラフを作成するには、「ど
の点とどの点をつなぐか」「点の並びはど
うするか」「点の位置座標は」「点を結ぶ
弧の曲がり具合はどうするか」など
これらの計算を一か...
Layout
今日は余力がある人(実装に自信がある人は
サポートします)
Hands On
時間までハンズオン
アニメーションまで一度手元で動かしてみて
ください
試したいことがある人は実装<-アシストし
ます
試したいことない人は相談してください<-
アシストします
気になるデータ
東京メトロ オープンデータ 活用コンテスト
http://tokyometro10th.jp/future/opendata/
福井県オープンデータライブラリ
http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/
その他の資料
SVGについてはこちらを
http://www.slideshare.net/kadoppe/inline-svghttp://www.slideshare.net/ssuser99dc16/svg-
maniaxcss-nite-after-...
可視化についてはこちらを
データ可視化のマントラ
Overview First, Zoom and Filter,
Then Details-on-Demand
Overview First, Zoom and Filter,
Then Details-on-Deman...
Gtug girls-20140828
Gtug girls-20140828
Gtug girls-20140828
Gtug girls-20140828
Gtug girls-20140828
Gtug girls-20140828
Gtug girls-20140828
Gtug girls-20140828
Gtug girls-20140828
Gtug girls-20140828
Upcoming SlideShare
Loading in...5
×

Gtug girls-20140828

1,096

Published on

d3

Published in: Software

Transcript of "Gtug girls-20140828"

  1. 1. D3.jsを 使ってみよう 2014/08/28 @muddydixon GTUG Girls Meetup #18
  2. 2. ! muddydixon " muddy.dixon # muddydixon ! Node.js Perl Visualization TimeSeries NeuralNetwork 私 is
  3. 3. アジェンダ D3.jsとは D3.jsの流れ D3.jsのサンプル紹介 D3.js ハンズオン 散布図 棒グラフ 折線グラフ グラフの可視化
  4. 4. データ可視化とは The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ データ可視化の目的は、データを可視化し、 情報を明確かつ効率的に伝えることである $
  5. 5. 今日の資料です https://github.com/muddydixon/ GTUGGIRLSTOKYO20140828
  6. 6. D3.jsとは
  7. 7. D3.jsとは
  8. 8. キラキラ 乙
  9. 9. D3.jsとは Data Driven Documents inline SVG https://developer.mozilla.org/ja/docs/ SVG_In_HTML_Introduction 複合ライブラリ SVG 操作 数値処理 可視化ユーティリティ
  10. 10. D3.jsとは D-D-D [ 53434, 28397, 41334 ] 図形化
  11. 11. D3.jsとは D-D-D [ 53434, 28397, 41334 ] [ 1, 0.53, 0.77 ] 正規化
  12. 12. D3.jsとは D-D-D [ 53434, 28397, 41334 ] [ 1, 0.53, 0.77 ] 正規化 図形化
  13. 13. D3.jsとは D-D-D [ 53434, 28397, 41334 ] [ 1, 0.53, 0.77 ] 正規化 図形化 Data Driven Documents
  14. 14. D3.jsとは D-D-D # Sepal.Length Sepal.Width Petal.Length Petal.Width Species 1 5.1 3.5 1.4 0.2 setosa 2 4.9 3.0 1.4 0.2 setosa 3 4.7 3.2 1.3 0.2 setosa 4 4.6 3.1 1.5 0.2 setosa 5 5.0 3.6 1.4 0.2 setosa 51 7.0 3.2 4.7 1.4 versicolor 52 6.4 3.2 4.5 1.5 versicolor 53 6.9 3.1 4.9 1.5 versicolor 54 5.5 2.3 4.0 1.3 versicolor 55 6.5 2.8 4.6 1.5 versicolor 101 6.3 3.3 6.0 2.5 virginica 102 5.8 2.7 5.1 1.9 virginica 103 7.1 3.0 5.9 2.1 virginica 104 6.3 2.9 5.6 1.8 virginica 105 6.5 3.0 5.8 2.2 virginica
  15. 15. D3.jsとは D-D-D # Sepal.Length Sepal.Width Petal.Length Petal.Width Species 1 5.1 3.5 1.4 0.2 setosa 2 4.9 3.0 1.4 0.2 setosa 3 4.7 3.2 1.3 0.2 setosa 4 4.6 3.1 1.5 0.2 setosa 5 5.0 3.6 1.4 0.2 setosa 51 7.0 3.2 4.7 1.4 versicolor 52 6.4 3.2 4.5 1.5 versicolor 53 6.9 3.1 4.9 1.5 versicolor 54 5.5 2.3 4.0 1.3 versicolor 55 6.5 2.8 4.6 1.5 versicolor 101 6.3 3.3 6.0 2.5 virginica 102 5.8 2.7 5.1 1.9 virginica 103 7.1 3.0 5.9 2.1 virginica 104 6.3 2.9 5.6 1.8 virginica 105 6.5 3.0 5.8 2.2 virginica
  16. 16. D3.jsとは D-D-D # Sepal.Length Sepal.Width Petal.Length Petal.Width Species 1 5.1 3.5 1.4 0.2 setosa 2 4.9 3.0 1.4 0.2 setosa 3 4.7 3.2 1.3 0.2 setosa 4 4.6 3.1 1.5 0.2 setosa 5 5.0 3.6 1.4 0.2 setosa 51 7.0 3.2 4.7 1.4 versicolor 52 6.4 3.2 4.5 1.5 versicolor 53 6.9 3.1 4.9 1.5 versicolor 54 5.5 2.3 4.0 1.3 versicolor 55 6.5 2.8 4.6 1.5 versicolor 101 6.3 3.3 6.0 2.5 virginica 102 5.8 2.7 5.1 1.9 virginica 103 7.1 3.0 5.9 2.1 virginica 104 6.3 2.9 5.6 1.8 virginica 105 6.5 3.0 5.8 2.2 virginica Data Driven Documents
  17. 17. D3.jsとは SVG SVG: Scalable Vector Graphics ! ! ! ! ! HTML5で「inline SVG」が利用可能に! htmlにsvg(xml)を埋め込んで利用可能! http://www.slideshare.net/k
  18. 18. D3.jsとは SVG <html> <head>略</head> <body> <svg width=200 height=200> <circle cx=100 cy=100 r=50 fill=red /> </svg> </body> </html>
  19. 19. D3.jsとは SVG <html> <head>略</head> <body> <svg width=200 height=200> <circle cx=100 cy=100 r=50 fill=red /> </svg> </body> </html>
  20. 20. D3.jsとは SVG <html> <head>略</head> <body> <svg width=200 height=200> <circle cx=100 cy=100 r=50 fill=red /> </svg> </body> </html> inline SVG (突然の丸)
  21. 21. D3.jsとは SVG XMLでかける! アニメーションに強い! Inspectorで見られる! 拡大縮小に強い! 反対に WebGL で 3D に! 平面の描画を高速に行える! 面積が決まっていれば一定のパフォーマンス 画像フォーマットで保存できる! http://dev.opera.com/articl
  22. 22. D3.jsの流れ
  23. 23. D3.jsの流れ データ作る SVGの準備をする DOMとデータを比較する 足りない部分をデータからDOMを生成 attrをいじる
  24. 24. サンプルで説明
  25. 25. D3.jsの流れ 0. HTML 基本はこれでずっといきます <!doctype html> <html> <head> <meta charset="utf-8"> <title>D3.js on GTUG Girls Tokyo</title> <style> .axis path, .axis line { fill: none; stroke: grey; } </style> </head> <body> <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/ d3.min.js"></script> <script type="text/javascript" src="./src/main.js"></script> </body> </html>
  26. 26. D3.jsの流れ 0. Web Web上げておくとAjaxとかも使えて便利です python -m http.server 5000 python -m SimpleHTTPServer 5000 plackup -MPlack::App::Directory -e 'Plack::App::Directory->new(root => ".")->to_app' ruby -run -e httpd -- --port=5000 . ruby -rwebrick -e 'WEBrick::HTTPServer.new(:Port => 5000, :DocumentRoot => ".").start' http://blog.kamipo.net/entry/2013/02/20/122225
  27. 27. D3.jsの流れ 1. データ データを作ります こういうの作っておくと便利 // データ生成ユーティリティ var dataGenerator = function(len, gen){ var array = [], i = 0; for(i = 0; i < len; i++){ array.push(gen ? gen(i) : i); } return array; }; // データ生成 var data = dataGenerator(100, function(i){ return { id: i, name: "name "+ i, x: 0|Math.random() * width, y: 0|Math.random() * height }; });
  28. 28. D3.jsの流れ 2. SVG 土台(svg)作り // var svg = d3.select("body").append("svg") .attr({width: WIDTH, height: HEIGHT}); var main = svg.append("g") .attr({ width: width, height: height, transform: “translate("+margin+","+margin+")" }); 初出 * (selection) d3.select * (selection) selection.append * (selection) selection.attr
  29. 29. D3.jsの流れ 3. データとDOMの紐付け データの紐付け var circle = // 現状の取得 main.selectAll("g.circle") // データのヒモ付 .data(data) // データ > 現状(DOM)の部分を取得 .enter() // "g"要素を追加し、classをセット .append("g").attr({"class": "circle"}); 初出 * (selection) selection.selectAll * (selection) selection.data * (selection) selection.enter
  30. 30. D3.jsの流れ 4. データからドキュメント データからの要素属性 circle.append("circle").attr({ r: 10, cx: function(d){ return d.x; }, cy: function(d){ return d.y; }, fill: "red" });
  31. 31. D3.jsの流れ 5. color 色を取得してみよう var color = d3.scale.category20(); circle.append("circle").attr({ r: 10, cx: function(d){ return d.x; }, cy: function(d){ return d.y; }, fill: function(d, i){ return color(i); } }); 初出 * (scale) d3.scale.category20
  32. 32. D3.jsの流れ データ作る SVGの準備をする DOMとデータを比較する 足りない部分をデータからDOMを生成 attrをいじる
  33. 33. Selection 紐付けたデータ既存のDOM .exit() selection .enter()
  34. 34. Selection (例えば) 紐付けたデータ既存のDOM .exit() selection .enter() 属性・スタイル・テキ ストの変更などを行う 新規にDOMを追加 し、同時に属性・スタ イル・テキストをセッ トする 既存のDOMを削除し たり、透明度を上げた りを行う
  35. 35. D3.jsで棒グラフ
  36. 36. 棒グラフ 新しい話 d3.scale.ordinal scale.rangeBands scale.domain d3.scale.linear scale.range d3.extent / d3.min / d3.max d3.svg.axis selection.call
  37. 37. 棒グラフ データ作成 // データ生成 var data = dataGenerator(10, function(i){ return { id: i, name: "name "+ i, // height よりも大きい! y: 0|Math.random() * 1000 }; });
  38. 38. 棒グラフ データ整理 アクセサを指定することで、配列から柔軟 に最大・最小・範囲を取り出せる 他にも平均とか中央値なども可能 // データの調査 var min = d3.min(data, function(d){ return d.y;}), max = d3.max(data, function(d){ return d.y;}), extent = d3.extent(data, function(d){ return d.y;}); アクセサ 初出 * (number) d3.min / d3.max * ([number, number]) d3.extent
  39. 39. 棒グラフ スケール作成: 超重要!scaleを制すこと必須 var x = d3.scale.ordinal() .domain(data.map(function(d){ return d.id; })) .rangeBands([0, width], 0.2), y = d3.scale.linear() .domain([0, max]) .range([height, 0]); // [0, height]じゃない! domain(入力) -> range(出力)の変換 quantitative / ordinalの2種類 quantitativeは「範囲->範囲」 ordinalは「ID->範囲」+ 範囲情報の提供 初出 * (scale) d3.scale.linear / d3.scale.ordinal
  40. 40. 棒グラフ scaleのrangeが[0,height]ではなく [height,0]だった理由 ブラウザ上では左上が(0,0) 右に行けば(x,0)、下に行けば(0,y) 大きい値ほど「高い」=「小さい値」 高さのほうを調整=「height - 高さ」
  41. 41. 棒グラフ 要素の描画の準備 var bar = // 現状の取得 main.selectAll("g.bar") // データのヒモ付 .data(data) // データ > 現状(DOM)の部分を取得 .enter() // "g"要素を追加し、classをセット .append("g") .attr({ "class": "bar", transform: function(d){ // コツ: 位置合わせをやっておく return “translate("+x(d.id)+","+height+")"; } });
  42. 42. 棒グラフ 要素の描画の準備 var bar = // 現状の取得 main.selectAll("g.bar") // データのヒモ付 .data(data) // データ > 現状(DOM)の部分を取得 .enter() // "g"要素を追加し、classをセット .append("g") .attr({ "class": "bar", transform: function(d){ // コツ: 位置合わせをやっておく return “translate("+x(d.id)+","+height+")"; } }); 描画上の一番下に合わせる height
  43. 43. 棒グラフ 要素の描画 bar.append("rect").attr({ width: x.rangeBand(), height: function(d){ return height - y(d.y); }, y: function(d){ return y(d.y) - height; }, fill: "red" }); // ラベルも付けておきます bar.append("text").text(function(d){ return d.y;});
  44. 44. 棒グラフ 軸の作成 var xaxis = main.append("g").call(d3.svg.axis().scale(x)).attr({ "class": "axis", transform: "translate(0,"+height+")" }); var yaxis = main.append(“g").call(d3.svg.axis().scale(y).orient("left")) .attr({ "class": "axis" }); 初出 * (svg) d3.svg.axis * (selection) selection.call
  45. 45. 閑話休題 SVG 要素
  46. 46. SVGで使えるタグ svg g defs, symbol, use path, line, rect, circle ellipse, polyline, polygon ! あとはフィルター周りがたくさんありますが ほとんど使う機会はありません
  47. 47. SVG, G SVG このタグは無いと始まりません!必ず作ります G 子要素をグループ化することができます。 例えば「棒とラベル」の位置を同時に変えるには G要素の位置を制御すれば一度で行えますし、ア ニメーションの時も手間が減ります ともにwidth/height/transform属性を取ります
  48. 48. PATH すべての描画要素(graphics element)はこれのalias だと考えることができます d属性でデータパス文字列を渡すことで描画させます e.g. M 100 100 L 300 100 L 200 300 z (100,100)から開始(M)し、(300,100)に移動(L)、 (200,300)に移動して、閉路を作る(z) fill属性: 閉路の中を指定した色で塗りつぶす stroke属性: パスを指定した色で描く stroke-width属性: パスの線の太さを指定する
  49. 49. CIRCLE, RECT, LINE, ELLIPSE circle要素 r属性: 半径を指定 cx/cy属性: 中心のx/y座標を指定 rect要素 width/height属性: 矩形の幅/高さを指定 x/y属性: 矩形の左上の位置を指定 rx/ry属性: 角丸の楕円半径を指定 line要素 x1/x2/y1/y2属性: 短点の座標を指定 ellipse要素 cx/cy属性: 楕円の中心位置の座標を指定 rx/ry属性: 楕円の半径を指定
  50. 50. Transform属性 transform属性には文字列で下記を指定する ことができます matrix: 変形行列(5要素)を指定 translate: 並行移動 e.g. transform(X,Y) rotate: 回転 e.g. rotate(-90) skewX/skewY: 傾斜(平行四辺形みたいに潰 す) e.g. skewX(45) scale: 拡大縮小 e.g. scale(1.5), scale(2,3)
  51. 51. D3.jsで折線グラフ
  52. 52. 折線グラフ 新しい話 d3.time.scale selection.datum d3.svg.line
  53. 53. データ作成 // データ生成 var data = dataGenerator(10, function(i){ var now = Date.now(); return { id: i, name: "name "+ i, x: new Date(now + 60000 * i), // 一分おき y: 0|Math.random() * 1000 }; }); 折線グラフ
  54. 54. スケール作成 // スケールの生成 var x = d3.time.scale() .domain(d3.extent(data, function(d){ return d.x; })) .range([0, width]), y = d3.scale.linear().domain([0, max]).range([height, 0]); 時間に特化したスケール 自動で時間の区間を調整してくれるため、axisに利用し た時に便利(年、四半期、月、日、時、分、など柔軟!) 初出 * (scale) d3.time.scale 折線グラフ
  55. 55. 要素描画ユーティリティ var line = d3.svg.line() .x(function(d){ return x(d.x); }) .y(function(d){ return y(d.y); }); // PATHDATA=line([{x: X, y:Y},{}]) 配列を受けて、PathDataの文字列を返す 類似のsvgとしてarea, arc, diagonalな どがある 初出 * (function) d3.svg.line 折線グラフ
  56. 56. 描画 var serie = // 現状の取得 main.append("path") // データのヒモ付 .datum(data) .attr({ d: line, fill: "none", stroke: color(0) }); 初出 * (selection) selection.datum path要素に対して、配列を紐付ける 折線グラフ
  57. 57. データの準備(オブジェクトの配列の配列) // データ生成 var series = dataGenerator(3, function(i){ return { name: "series " + i, data: dataGenerator(10, function(j){ var now = Date.now(); return { id: j, name: "name "+ j, x: new Date(now + 60000 * j), // 一分おき y: 0|Math.random() * 1000 }; }) }; }); 複数の折線グラフ
  58. 58. データの範囲を取得(2回 min/maxを使う) var maxY = d3.max(series, function(serie){ return d3.max(serie.data, function(d){ return d.y;}); }); var minX = d3.min(series, function(serie){ return d3.min(serie.data, function(d){ return d.x;}); }), maxX = d3.max(series, function(serie){ return d3.max(serie.data, function(d){ return d.x;}); }); 複数の折線グラフ
  59. 59. 紐付けて描画 var serie = // 現状の取得 main.selectAll("g.serie") // データのヒモ付 .data(series) .enter() .append("g").attr({"class": "serie"}); ! serie.append("path").attr({ d: function(d){ return line(d.data); }, fill: "none", stroke: function(d){ return color(d.name); } }); 複数の折線グラフ
  60. 60. One more thing 各ポイントにドットと数値を var serie = // 現状の取得 main.selectAll("g.serie") // データのヒモ付 .data(series) .enter() .append("g").attr({ "class": "serie", fill: function(d){ return color(d.name); } }); 子要素すべてのfillを指定
  61. 61. 紐付けて描画 var point = serie.selectAll("g.point") .data(function(d){ return d.data;}).enter() .append("g").attr({ "class": "point", transform: function(d){ return "translate("+x(d.x)+","+y(d.y)+")"; } }); point.append("circle").attr({r: 5}); point.append("text").text(function(d){ return d.y; }).attr({dy: -8}); One more thing
  62. 62. Animation
  63. 63. selection.transition()につづいて.attr を指定することで現在->指定したattrへの アニメーションが行われます e.g. d3.select( circle ).transition().att r({fill: green })
  64. 64. Animation 更新処理関数(前半) var updateLine = function(){ // スケールのドメイン更新 x.domain(d3.extent(data, function(d){ return d.x; })); var max = d3.max(data, function(d){ return d.y;}); y.domain([0, max]); ! // 折線の変形アニメーション serie.transition() .attr({ d: line }); ! これでアニメーションを利用できる!
  65. 65. Animation 更新処理関数(中盤) // 新たにデータが増えたのでselection撮り直し var point = main.selectAll("g.point").data(data); // データ追加分の処理 var newpoint = point.enter().append(“g") .attr({"class": "point", fill: color(0), transform: function(d){ return "translate("+x(d.x)+","+y(d.y)+")"; } }); newpoint.append("circle").attr({ r: 5 }); newpoint.append("text").text(function(d){return d.y;}).attr({dy:-8}); // 既存データのアニメーション point.transition().attr({ transform: function(d){ return "translate("+x(d.x)+","+y(d.y)+")"; } });
  66. 66. Animation 更新処理関数(後半) // 軸の更新 xaxis.call(d3.svg.axis().scale(x)); yaxis.call(d3.svg.axis().scale(y).orient("left")); };
  67. 67. Layout
  68. 68. Layoutとは 再利用可能なアルゴリズムの塊 基本的には「元データ」から「ある可視化 表現に必要なデータ」への変換プログラム +αでアニメーションやイベントなどがつい てくる
  69. 69. キラキラ 乙
  70. 70. Layout シャレオツな可視化を作るには、たくさん の変数が必要です 例えば、関係グラフを作成するには、「ど の点とどの点をつなぐか」「点の並びはど うするか」「点の位置座標は」「点を結ぶ 弧の曲がり具合はどうするか」など これらの計算を一から実装しないで済むよ うにするためにLayoutが存在します
  71. 71. Layout 今日は余力がある人(実装に自信がある人は サポートします)
  72. 72. Hands On
  73. 73. 時間までハンズオン アニメーションまで一度手元で動かしてみて ください 試したいことがある人は実装<-アシストし ます 試したいことない人は相談してください<- アシストします
  74. 74. 気になるデータ
  75. 75. 東京メトロ オープンデータ 活用コンテスト http://tokyometro10th.jp/future/opendata/
  76. 76. 福井県オープンデータライブラリ http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/
  77. 77. その他の資料
  78. 78. SVGについてはこちらを http://www.slideshare.net/kadoppe/inline-svghttp://www.slideshare.net/ssuser99dc16/svg- maniaxcss-nite-after-dark7-svgmatsuda https://github.com/muddydixon/html5conference
  79. 79. 可視化についてはこちらを
  80. 80. データ可視化のマントラ Overview First, Zoom and Filter, Then Details-on-Demand Overview First, Zoom and Filter, Then Details-on-Demand Overview First, Zoom and Filter, Then Details-on-Demand Ben Shneiderman $
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×