Gtug girls-20140828

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 effectivelty.

Vitaly Friedman

$

データ可視化の目的は、データを可視化し、情報を明確かつ効率的に伝えることである

$

今日の資料ですhttps://github.com/muddydixon/GTUGGIRLSTOKYO20140828

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 操作数値処理可視化ユーティリティ

https://developer.mozilla.org/ja/docs/SVG_In_HTML_Introduction

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 Driv

en

Documen

ts

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


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


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 Driv

en

Documen

ts

D3.jsとは~SVG~SVG: Scalable Vector Graphics !

!

!

!

!

HTML5で「inline SVG」が利用可能に！ htmlにsvg(xml)を埋め込んで利用可能！

http://www.slideshare.net/kadoppe/inline-svg

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 SV

G

(突然の丸)

D3.jsとは~SVG~XMLでかける！アニメーションに強い！ Inspectorで見られる！拡大縮小に強い！反対に WebGL で 3D に！平面の描画を高速に行える！面積が決まっていれば一定のパフォーマンス画像フォーマットで保存できる！

http://dev.opera.com/articles/svg-or-canvas-choose/

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</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>

D3.jsの流れ 0. WebWeb上げておくと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

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 }; });

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

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

D3.jsの流れ 4. データからドキュメントデータからの要素属性

circle.append("circle").attr({ r: 10, cx: function(d){ return d.x; }, cy: function(d){ return d.y; }, fill: "red" });

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

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.axis selection.call

棒グラフデータ作成

// データ生成 var data = dataGenerator(10, function(i){ return { id: i, name: "name "+ i, // height よりも大きい! y: 0|Math.random() * 1000 }; });

棒グラフデータ整理アクセサを指定することで、配列から柔軟に最大・最小・範囲を取り出せる他にも平均とか中央値なども可能

// データの調査 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

棒グラフスケール作成: 超重要！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

棒グラフscaleのrangeが[0,height]ではなく[height,0]だった理由ブラウザ上では左上が(0,0) 右に行けば(x,0)、下に行けば(0,y) 大きい値ほど「高い」=「小さい値」高さのほうを調整=「height - 高さ」

棒グラフ要素の描画の準備

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+")"; } });

棒グラフ要素の描画の準備

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

棒グラフ要素の描画

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;});

棒グラフ軸の作成

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

閑話休題 SVG 要素

SVGで使えるタグsvg g defs, symbol, use path, line, rect, circle ellipse, polyline, polygon !

あとはフィルター周りがたくさんありますがほとんど使う機会はありません

SVG, GSVG このタグは無いと始まりません！必ず作ります G 子要素をグループ化することができます。例えば「棒とラベル」の位置を同時に変えるにはG要素の位置を制御すれば一度で行えますし、アニメーションの時も手間が減りますともにwidth/height/transform属性を取ります

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属性: パスの線の太さを指定する

CIRCLE, RECT, LINE, ELLIPSEcircle要素 r属性: 半径を指定 cx/cy属性: 中心のx/y座標を指定

rect要素 width/height属性: 矩形の幅/高さを指定 x/y属性: 矩形の左上の位置を指定 rx/ry属性: 角丸の楕円半径を指定

line要素 x1/x2/y1/y2属性: 短点の座標を指定

ellipse要素 cx/cy属性: 楕円の中心位置の座標を指定 rx/ry属性: 楕円の半径を指定

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)

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 Date(now + 60000 * i), // 一分おき y: 0|Math.random() * 1000 }; });

折線グラフ

スケール作成 // スケールの生成 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

折線グラフ

要素描画ユーティリティ 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

折線グラフ

描画 var serie = // 現状の取得 main.append("path") // データのヒモ付 .datum(data) .attr({ d: line, fill: "none", stroke: color(0) });

初出 * (selection) selection.datum

path要素に対して、配列を紐付ける

折線グラフ

データの準備(オブジェクトの配列の配列) // データ生成 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 }; }) }; });

複数の折線グラフ

データの範囲を取得(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;}); });


紐付けて描画 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); } });


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を指定

紐付けて描画 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

Animation

selection.transition()につづいて.attrを指定することで現在->指定したattrへのアニメーションが行われます e.g. d3.select(“circle”).transition().attr({fill: “green”})

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 }); !

これでアニメーションを利用できる！

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)+")"; } });

Animation更新処理関数(後半)

// 軸の更新 xaxis.call(d3.svg.axis().scale(x)); yaxis.call(d3.svg.axis().scale(y).orient("left")); };

Layout

Layoutとは再利用可能なアルゴリズムの塊基本的には「元データ」から「ある可視化表現に必要なデータ」への変換プログラム +αでアニメーションやイベントなどがついてくる

キラキラ乙

Layoutシャレオツな可視化を作るには、たくさんの変数が必要です例えば、関係グラフを作成するには、「どの点とどの点をつなぐか」「点の並びはどうするか」「点の位置座標は」「点を結ぶ弧の曲がり具合はどうするか」などこれらの計算を一から実装しないで済むようにするためにLayoutが存在します

Layout今日は余力がある人(実装に自信がある人はサポートします)

Hands On

時間までハンズオンアニメーションまで一度手元で動かしてみてください試したいことがある人は実装<-アシストします試したいことない人は相談してください<-アシストします

気になるデータ

東京メトロオープンデータ活用コンテスト

http://tokyometro10th.jp/future/opendata/

福井県オープンデータライブラリ

http://www.pref.fukui.lg.jp/doc/toukei-jouhou/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-dark7-svgmatsuda

https://github.com/muddydixon/html5conference

可視化についてはこちらを

データ可視化のマントラ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

$

Software

Gtug girls-20140828