Gtug girls-20140828
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
929
On Slideshare
855
From Embeds
74
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
7

Embeds 74

https://twitter.com 74

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. D3.jsを 使ってみよう 2014/08/28 @muddydixon GTUG Girls Meetup #18
  • 2. ! muddydixon " muddy.dixon # muddydixon ! Node.js Perl Visualization TimeSeries NeuralNetwork 私 is
  • 3. アジェンダ D3.jsとは D3.jsの流れ D3.jsのサンプル紹介 D3.js ハンズオン 散布図 棒グラフ 折線グラフ グラフの可視化
  • 4. データ可視化とは The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty. Vitaly Friedman $ データ可視化の目的は、データを可視化し、 情報を明確かつ効率的に伝えることである $
  • 5. 今日の資料です https://github.com/muddydixon/ GTUGGIRLSTOKYO20140828
  • 6. D3.jsとは
  • 7. D3.jsとは
  • 8. キラキラ 乙
  • 9. D3.jsとは Data Driven Documents inline SVG https://developer.mozilla.org/ja/docs/ SVG_In_HTML_Introduction 複合ライブラリ SVG 操作 数値処理 可視化ユーティリティ
  • 10. D3.jsとは D-D-D [ 53434, 28397, 41334 ] 図形化
  • 11. D3.jsとは D-D-D [ 53434, 28397, 41334 ] [ 1, 0.53, 0.77 ] 正規化
  • 12. D3.jsとは D-D-D [ 53434, 28397, 41334 ] [ 1, 0.53, 0.77 ] 正規化 図形化
  • 13. D3.jsとは D-D-D [ 53434, 28397, 41334 ] [ 1, 0.53, 0.77 ] 正規化 図形化 Data Driven Documents
  • 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. 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. 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. D3.jsとは SVG SVG: Scalable Vector Graphics ! ! ! ! ! HTML5で「inline SVG」が利用可能に! htmlにsvg(xml)を埋め込んで利用可能! http://www.slideshare.net/k
  • 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. 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. 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. D3.jsとは SVG XMLでかける! アニメーションに強い! Inspectorで見られる! 拡大縮小に強い! 反対に WebGL で 3D に! 平面の描画を高速に行える! 面積が決まっていれば一定のパフォーマンス 画像フォーマットで保存できる! http://dev.opera.com/articl
  • 22. D3.jsの流れ
  • 23. D3.jsの流れ データ作る SVGの準備をする DOMとデータを比較する 足りない部分をデータからDOMを生成 attrをいじる
  • 24. サンプルで説明
  • 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. 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. 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. 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. 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. D3.jsの流れ 4. データからドキュメント データからの要素属性 circle.append("circle").attr({ r: 10, cx: function(d){ return d.x; }, cy: function(d){ return d.y; }, fill: "red" });
  • 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. D3.jsの流れ データ作る SVGの準備をする DOMとデータを比較する 足りない部分をデータからDOMを生成 attrをいじる
  • 33. Selection 紐付けたデータ既存のDOM .exit() selection .enter()
  • 34. Selection (例えば) 紐付けたデータ既存のDOM .exit() selection .enter() 属性・スタイル・テキ ストの変更などを行う 新規にDOMを追加 し、同時に属性・スタ イル・テキストをセッ トする 既存のDOMを削除し たり、透明度を上げた りを行う
  • 35. D3.jsで棒グラフ
  • 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. 棒グラフ データ作成 // データ生成 var data = dataGenerator(10, function(i){ return { id: i, name: "name "+ i, // height よりも大きい! y: 0|Math.random() * 1000 }; });
  • 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. 棒グラフ スケール作成: 超重要!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. 棒グラフ scaleのrangeが[0,height]ではなく [height,0]だった理由 ブラウザ上では左上が(0,0) 右に行けば(x,0)、下に行けば(0,y) 大きい値ほど「高い」=「小さい値」 高さのほうを調整=「height - 高さ」
  • 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. 棒グラフ 要素の描画の準備 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. 棒グラフ 要素の描画 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. 棒グラフ 軸の作成 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. 閑話休題 SVG 要素
  • 46. SVGで使えるタグ svg g defs, symbol, use path, line, rect, circle ellipse, polyline, polygon ! あとはフィルター周りがたくさんありますが ほとんど使う機会はありません
  • 47. SVG, G SVG このタグは無いと始まりません!必ず作ります G 子要素をグループ化することができます。 例えば「棒とラベル」の位置を同時に変えるには G要素の位置を制御すれば一度で行えますし、ア ニメーションの時も手間が減ります ともにwidth/height/transform属性を取ります
  • 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. 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. 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. D3.jsで折線グラフ
  • 52. 折線グラフ 新しい話 d3.time.scale selection.datum d3.svg.line
  • 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. スケール作成 // スケールの生成 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. 要素描画ユーティリティ 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. 描画 var serie = // 現状の取得 main.append("path") // データのヒモ付 .datum(data) .attr({ d: line, fill: "none", stroke: color(0) }); 初出 * (selection) selection.datum path要素に対して、配列を紐付ける 折線グラフ
  • 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. データの範囲を取得(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. 紐付けて描画 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. 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. 紐付けて描画 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. Animation
  • 63. selection.transition()につづいて.attr を指定することで現在->指定したattrへの アニメーションが行われます e.g. d3.select( circle ).transition().att r({fill: green })
  • 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. 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. Animation 更新処理関数(後半) // 軸の更新 xaxis.call(d3.svg.axis().scale(x)); yaxis.call(d3.svg.axis().scale(y).orient("left")); };
  • 67. Layout
  • 68. Layoutとは 再利用可能なアルゴリズムの塊 基本的には「元データ」から「ある可視化 表現に必要なデータ」への変換プログラム +αでアニメーションやイベントなどがつい てくる
  • 69. キラキラ 乙
  • 70. Layout シャレオツな可視化を作るには、たくさん の変数が必要です 例えば、関係グラフを作成するには、「ど の点とどの点をつなぐか」「点の並びはど うするか」「点の位置座標は」「点を結ぶ 弧の曲がり具合はどうするか」など これらの計算を一から実装しないで済むよ うにするためにLayoutが存在します
  • 71. Layout 今日は余力がある人(実装に自信がある人は サポートします)
  • 72. Hands On
  • 73. 時間までハンズオン アニメーションまで一度手元で動かしてみて ください 試したいことがある人は実装<-アシストし ます 試したいことない人は相談してください<- アシストします
  • 74. 気になるデータ
  • 75. 東京メトロ オープンデータ 活用コンテスト http://tokyometro10th.jp/future/opendata/
  • 76. 福井県オープンデータライブラリ http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/
  • 77. その他の資料
  • 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. 可視化についてはこちらを
  • 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 $