Download as PDF, PPTX
![D3.jsとは D-D-D
[
53434,
28397,
41334
]
図形化](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-11-320.jpg)
![D3.jsとは D-D-D
[
53434,
28397,
41334
]
[
1,
0.53,
0.77
]
正規化](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-12-320.jpg)
![D3.jsとは D-D-D
[
53434,
28397,
41334
]
[
1,
0.53,
0.77
]
正規化 図形化](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-13-320.jpg)
![D3.jsとは D-D-D
[
53434,
28397,
41334
]
[
1,
0.53,
0.77
]
正規化 図形化
Data Driven
Documents](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-14-320.jpg)
![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
};
});](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-28-320.jpg)
![棒グラフ
データ整理
アクセサを指定することで、配列から柔軟
に最大・最小・範囲を取り出せる
他にも平均とか中央値なども可能
// データの調査
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](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-41-320.jpg)
![棒グラフ
スケール作成: 超重要！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](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-42-320.jpg)
![棒グラフ
scaleのrangeが[0,height]ではなく
[height,0]だった理由
ブラウザ上では左上が(0,0)
右に行けば(x,0)、下に行けば(0,y)
大きい値ほど「高い」=「小さい値」
高さのほうを調整=「height - 高さ」](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-43-320.jpg)
![スケール作成
// スケールの生成
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
折線グラフ](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-59-320.jpg)
![要素描画ユーティリティ
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
折線グラフ](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-60-320.jpg)
![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
});
!
これでアニメーションを利用できる！](https://image.slidesharecdn.com/gtug-girls-20140828-140828063701-phpapp02/85/Gtug-girls-20140828-72-320.jpg)
![[db tech showcase Tokyo 2015] A14:Amazon Redshiftの元となったスケールアウト型カラムナーDB徹底解説 その...](https://cdn.slidesharecdn.com/ss_thumbnails/dbts-tokyo-2015a14actian-matrix-insight-technology-150618094408-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[機械学習]文章のクラス分類](https://cdn.slidesharecdn.com/ss_thumbnails/ss-160218112331-thumbnail.jpg?width=640&height=640&fit=bounds)
![Data Visualizationしてみた [ D3.js編 ]](https://cdn.slidesharecdn.com/ss_thumbnails/wplt0317a-160323052825-thumbnail.jpg?width=640&height=640&fit=bounds)
Gtug girls-20140828
- 1.
- 2. ! muddydixon " muddy.dixon #muddydixon ! Node.js Perl Visualization TimeSeries NeuralNetwork 私 is
- 3.
- 4. データ可視化とは The main goalof data visualization is its ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ データ可視化の目的は、データを可視化し、 情報を明確かつ効率的に伝えることである $
- 5.
- 6.
- 7.
- 9.
- 10. D3.jsとは Data Driven Documents inlineSVG https://developer.mozilla.org/ja/docs/ SVG_In_HTML_Introduction 複合ライブラリ SVG 操作 数値処理 可視化ユーティリティ
- 11.
- 12.
- 13.
- 14.
- 15. D3.jsとは D-D-D # Sepal.LengthSepal.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. D3.jsとは D-D-D # Sepal.LengthSepal.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
- 17. D3.jsとは D-D-D # Sepal.LengthSepal.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
- 18. D3.jsとは SVG SVG: ScalableVector Graphics ! ! ! ! ! HTML5で「inline SVG」が利用可能に！ htmlにsvg(xml)を埋め込んで利用可能！ http://www.slideshare.net/k
- 19. D3.jsとは SVG <html> <head>略</head> <body> <svg width=200height=200> <circle cx=100 cy=100 r=50 fill=red /> </svg> </body> </html>
- 20. D3.jsとは SVG <html> <head>略</head> <body> <svg width=200height=200> <circle cx=100 cy=100 r=50 fill=red /> </svg> </body> </html>
- 21. D3.jsとは SVG <html> <head>略</head> <body> <svg width=200height=200> <circle cx=100 cy=100 r=50 fill=red /> </svg> </body> </html> inline SVG (突然の丸)
- 22. D3.jsとは SVG XMLでかける！ アニメーションに強い！ Inspectorで見られる！ 拡大縮小に強い！ 反対に WebGL で3D に！ 平面の描画を高速に行える！ 面積が決まっていれば一定のパフォーマンス 画像フォーマットで保存できる！ http://dev.opera.com/articl
- 23.
- 24.
- 25.
- 26. D3.jsの流れ 0. HTML 基本はこれでずっといきます <!doctypehtml> <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>
- 27. 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
- 28. 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 }; });
- 29. D3.jsの流れ 2. SVG 土台(svg)作り // varsvg = 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
- 30. D3.jsの流れ 3. データとDOMの紐付け データの紐付け varcircle = // 現状の取得 main.selectAll("g.circle") // データのヒモ付 .data(data) // データ > 現状(DOM)の部分を取得 .enter() // "g"要素を追加し、classをセット .append("g").attr({"class": "circle"}); 初出 * (selection) selection.selectAll * (selection) selection.data * (selection) selection.enter
- 31. D3.jsの流れ 4. データからドキュメント データからの要素属性 circle.append("circle").attr({ r:10, cx: function(d){ return d.x; }, cy: function(d){ return d.y; }, fill: "red" });
- 33. D3.jsの流れ 5. color 色を取得してみよう varcolor = 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
- 35.
- 36.
- 37.
- 38.
- 39. 棒グラフ 新しい話 d3.scale.ordinal scale.rangeBands scale.domain d3.scale.linear scale.range d3.extent / d3.min/ d3.max d3.svg.axis selection.call
- 40. 棒グラフ データ作成 // データ生成 var data= dataGenerator(10, function(i){ return { id: i, name: "name "+ i, // height よりも大きい! y: 0|Math.random() * 1000 }; });
- 41. 棒グラフ データ整理 アクセサを指定することで、配列から柔軟 に最大・最小・範囲を取り出せる 他にも平均とか中央値なども可能 // データの調査 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
- 42. 棒グラフ スケール作成: 超重要！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
- 43.
- 44. 棒グラフ 要素の描画の準備 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+")"; } });
- 45. 棒グラフ 要素の描画の準備 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
- 46. 棒グラフ 要素の描画 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;});
- 48. 棒グラフ 軸の作成 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
- 50.
- 51. SVGで使えるタグ svg g defs, symbol, use path,line, rect, circle ellipse, polyline, polygon ! あとはフィルター周りがたくさんありますが ほとんど使う機会はありません
- 52.
- 53. PATH すべての描画要素(graphics element)はこれのalias だと考えることができます d属性でデータパス文字列を渡すことで描画させます e.g. M100 100 L 300 100 L 200 300 z (100,100)から開始(M)し、(300,100)に移動(L)、 (200,300)に移動して、閉路を作る(z) fill属性: 閉路の中を指定した色で塗りつぶす stroke属性: パスを指定した色で描く stroke-width属性: パスの線の太さを指定する
- 54. 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属性: 楕円の半径を指定
- 55. 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)
- 56.
- 57.
- 58. データ作成 // データ生成 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 }; }); 折線グラフ
- 59. スケール作成 // スケールの生成 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 折線グラフ
- 60. 要素描画ユーティリティ 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 折線グラフ
- 61. 描画 var serie = //現状の取得 main.append("path") // データのヒモ付 .datum(data) .attr({ d: line, fill: "none", stroke: color(0) }); 初出 * (selection) selection.datum path要素に対して、配列を紐付ける 折線グラフ
- 63. データの準備(オブジェクトの配列の配列) // データ生成 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 }; }) }; }); 複数の折線グラフ
- 64. データの範囲を取得(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;}); }); 複数の折線グラフ
- 65. 紐付けて描画 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); } }); 複数の折線グラフ
- 67. One more thing 各ポイントにドットと数値を varserie = // 現状の取得 main.selectAll("g.serie") // データのヒモ付 .data(series) .enter() .append("g").attr({ "class": "serie", fill: function(d){ return color(d.name); } }); 子要素すべてのfillを指定
- 68. 紐付けて描画 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
- 70.
- 71.
- 72. 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 }); ! これでアニメーションを利用できる！
- 73. 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)+")"; } });
- 74.
- 76.
- 77.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90. データ可視化のマントラ Overview First, Zoomand 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 $