どんなデータでもキレイに魅せる！ 〜HTML5/JavaScriptでグラフを描画する今時の手法〜
•
41 recomendaciones•6,209 vistas
2015年3月24日にSchooで話した時のスライドです。 https://schoo.jp/class/2151
Recomendados
Recomendados
Más contenido relacionado
Destacado
Similar a どんなデータでもキレイに魅せる！ 〜HTML5/JavaScriptでグラフを描画する今時の手法〜
Similar a どんなデータでもキレイに魅せる！ 〜HTML5/JavaScriptでグラフを描画する今時の手法〜 (20)
Más de Hideyuki Takeuchi
どんなデータでもキレイに魅せる！ 〜HTML5/JavaScriptでグラフを描画する今時の手法〜
- 2. 自己紹介
- 3. 自己紹介 ● 株式会社ユーザベース ● チーフテクノロジスト (=CTØ) / イノベーション担当執行役員 ● 技術特性: 広く浅く時々深く パソコンが関わる事なら大体何でも好き 3 たけうち ひでゆき @chimerast
- 4. E2D3紹介 ● OSSプロジェクト ● 全ての人にデータ可視化技術を ● Excel上でデータを入力し、人の作った データ可視化プログラムで可視化を行える ● 30人ぐらいの人がコントリビュータとして ゆるく関わっています 4 E2D3: Excel to D3.js
- 7. データ可視化
- 9. データ可視化の必要性 ● データドリブンな意思決定への需要の高まり ● 大きな(複雑なデータ)を素早く理解しなければならない ● データを人の目で知覚可能な形へと「可視化」する ● データビジュアライゼーションへの注目 9
- 11. データビジュアライゼーションの定義 ● あるデータセットが、予め用意されたアルゴリズムを用い て、コンピュータによって描画されること。 ● その描画によってデータセットを眺めているだけではわから ない傾向や特徴が明らかになっていること。 ● アルゴリズムはコーディングによって定義され、形式知化／ 可視化されていること。 ● ソート、フィルター、トグルなどのインタラクションが可能で、 その場でその結果がすぐ得られること。 11 出典: http://visualizing.jp/infograph_vs_dataviz/
- 12. インフォグラフィックスとの対比 12 ● データをありのままに見せ、 見る人にデータを触らせる ● どちらかというとエンジニア サイドから出てきたもの ● 管理画面・ダッシュボードで 使われることが多い ● ストーリーに沿うようにデータを選 択してわかりやすく見せる ● どちらかというとデザイナサイドか ら出てきたもの ● ニュース記事で使われることが多 い インフォグラフィックスデータビジュアライズ
- 13. 最近のデータ可視化
- 15. ブラウザ上でのデータ可視化 The Wealth & Health of Nations http://bost.ocks.org/mike/nations/ Four Ways to Slice Obama’s 2013 Budget Proposal http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html The Facebook Offering: How It Compares http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering- compares.html dc.js http://dc-js.github.io/dc.js/ 15
- 21. D3.jsを使ったデータ可視化
- 24. D3.jsについて ● Data Driven Document の略 ● データビジュアライズを作るのに必要なものを 集めたライブラリ ● ビジュアライズそのものを提供しているものではない ● Mike Bostock 作 ○ 今はThe New York Timesで グラフィックエディターをしている ● http://bost.ocks.org/mike/ 24
- 25. D3.jsの良いところ ● とにかくサンプルが多い ● d3.js Gallery (https://github. com/mbostock/d3/wiki/Gallery) ● bl.ocks.org (http://bl.ocks.org/) ○ Gistに上がっているデータ可視化表現を描画してく れるサイト ● Mike Bostock のものを見るだけでもお なかいっぱい(849個) (http://bl.ocks.org/mbostock) 25
- 26. Core データ操作や取得、アニメーション、色等の共通機能群 Scales データと描画座標の間の変換する機能群 SVG SVGのオブジェクトを作るための便利機能群 Time 時間の操作や文字列との間の変換機能群 Layouts データによる配置に関する機能群 Geography 地理データの射影などを行う機能群 Geometry ボロノイ図等の2次元の可視化表現を扱うための機能群 Behaviors ドラッグやズームなどを扱う機能群 D3.jsが提供する機能 26 https://github.com/mbostock/d3/wiki/API-Reference
- 27. D3.jsを試すのに便利な環境 JSFiddle http://jsfiddle.net/ HTML + CSS + JavaScript をブラウザ上で試せる環境 左側の「Frameworks & Extensions」から「D3」を選択すると D3.jsを簡単に試せる 27
- 28. SVG: Smart Vector Graphics XMLをベースにした2次元ベクター画像フォーマット 最近のブラウザがサポート: IE9以上, Firefox, Chrome 28 <svg width="120" height="120"> <rect x="10" y="10" width="100" height="100"rx="15" ry="15" /> </svg> 基本D3.jsはSVG DOM Nodeを いじって最終的な画像を作り出す
- 29. SVG + CSS 29 rect { fill: #fcc; stroke: black; stroke-width: 5px; } <svg width="120" height="120"> <rect x="10" y="10" width="100" height="100"rx="15" ry="15" /> </svg>
- 31. D3のDOM操作の基本 jQueryと同じようなSelectorを使ってDOMを選択し、 それに対して操作を行います。 http://jsfiddle.net/chimerast/7f5L0Lc3/ d3.select(‘svg’).selectAll(‘rect’) // svgの中のrectを選択 .data(array) // 選択されたrectの集合にデータを紐付ける .enter().append(‘rect’) // データの数に足りない分だけrectを増やす .attr(‘width’, function (d) { return d.width; }); // データを使って属性変更 31
- 32. .enter() と .exit() .enter() ● selectAll()で取り出したDOM要素より紐付けられたデータが多ければ、その差 分の個数だけ空の箱を作成し返す ● 普通はその箱に対して.append()で要素を追加 ● 必要になったDOM要素をフェードインや画面外からのアニメーションで追加出来 る .exit() ● .enter()の逆でDOMが多い分だけそのDOM要素を返す ● いらなくなったDOM要素をフェードアウトさせつつ消したり出来る 32
- 35. Scale ある範囲の値を別の範囲の値に射影する関数を返す仕組み データを実際の画面上の距離に変換するのに使う http://jsfiddle.net/chimerast/d6yguho8/ var x = d3.scale.linear() .range([0, 100]) // 0から100の範囲に .domain([-100, 200]); // -100から200の値を射影する x(-100); // -> 0 x(100); // -> 66.66666 35
- 36. Transition 数値や属性を目的の値に徐々に変化させる仕組み アニメーションをするのに使う http://jsfiddle.net/chimerast/fdf6u5x7/ .attr('height', 0) // 元々の高さが0で .transition() .delay(2000) // 2秒間で .attr('height', 100); // 100の高さにする 36
- 37. Event 要素に対してイベントを追加する仕組み jQueryの.on()と変わらない http://jsfiddle.net/chimerast/g0b7sywe/ .on('click', function (d) { alert(d); }) 37
- 40. Coffee Flavour Wheel http://www.jasondavies.com/coffee-wheel/ 木構造が表現可能 -> 視覚的にブレイクダウンできる 円グラフ(Pie Chart)もこんなリッチに 40
- 42. 「E2D3」の紹介
- 44. OSSプロジェクト「E2D3」 E2D3: Excel to D3.js http://e2d3.org/ GitHub: https://github.com/e2d3/e2d3/ Officeストア にて配信中 Excel2013以上 もしくは ブラウザのOffice365上で動作 現在絶賛開発中 求むコントリビュータ—！ 44
- 46. デモ
- 47. ユースケース 営業・コンサルタント データを地図等にマッピング 収集したデータをインタラクティブに可視化 Webニュース記者・編集者 データジャーナリズム 読者にデータを触らせて気づかせる 47
- 48. E2D3の仕組み Excel2013 および Office365 には、 HTMLとJavaScriptで作られたアプリを 追加する機能があるのでそれを利用 Apps for Office https://msdn.microsoft.com/JA-JP/library/office/jj220060.aspx JavaScript API for Office https://msdn.microsoft.com/ja-jp/library/office/fp142185.aspx 48
- 49. テンプレート開発はとっても簡単 https://github.com/e2d3/e2d3- contrib/tree/master/barchart-javascript main.jsを書くだけ ● root変数に描画すべき先のDOMノードが入っている ● update(data) 関数を定義するとシステム側から呼び出され dataにExcelのセルのデータが入ってくる ● dataを各種形式に変換する便利関数があります 49
- 52. OSSへのコントリビュート 詳しくはWikiを参照 https://github.com/e2d3/e2d3/wiki/Getting-Started https://github.com/e2d3/e2d3-contrib/wiki/Let's-add-a-map-by-E2D3 チャートを作ったらe2d3-contribにpull requestを投げてくださ い よくわからなかったらTwitterで #e2d3 つけてつぶやく e2d3やe2d3-serverへの機能追加も歓迎です 52
- 53. まとめ ● モダンブラウザの普及によりデータビジュアライズが当たり 前の技術になり始めています ● D3.jsを使うとデータビジュアライズを比較的簡単に作れま す ● E2D3が普及すると、プログラマ以外もデータビジュアライズ の恩恵を受けられるようになります 53