Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

どんなデータでもキレイに魅せる! 〜HTML5/JavaScriptでグラフを描画する今時の手法〜

4,851 views

Published on

2015年3月24日にSchooで話した時のスライドです。
https://schoo.jp/class/2151

Published in: Data & Analytics
  • Be the first to comment

どんなデータでもキレイに魅せる! 〜HTML5/JavaScriptでグラフを描画する今時の手法〜

  1. 1. どんなデータでもキレイに魅せる! ~HTML5/JavaScriptでグラフを描画する今どき手法~ たけうち ひでゆき
  2. 2. 自己紹介
  3. 3. 自己紹介 ● 株式会社ユーザベース ● チーフテクノロジスト (=CTØ) / イノベーション担当執行役員 ● 技術特性: 広く浅く時々深く パソコンが関わる事なら大体何でも好き 3 たけうち ひでゆき @chimerast
  4. 4. E2D3紹介 ● OSSプロジェクト ● 全ての人にデータ可視化技術を ● Excel上でデータを入力し、人の作った データ可視化プログラムで可視化を行える ● 30人ぐらいの人がコントリビュータとして ゆるく関わっています 4 E2D3: Excel to D3.js
  5. 5. 後ほどもうちょっと詳しく説明します
  6. 6. 提 供 全ての人にデータ可視化技術を
  7. 7. データ可視化
  8. 8. 自己紹介 データ可視化の必要性 最近のデータ可視化 D3.jsを使ったデータ可視化 D3.jsを使ってみる オープンソースプロジェクト「E2D3」の紹介 8
  9. 9. データ可視化の必要性 ● データドリブンな意思決定への需要の高まり ● 大きな(複雑なデータ)を素早く理解しなければならない ● データを人の目で知覚可能な形へと「可視化」する ● データビジュアライゼーションへの注目 9
  10. 10. データ可視化の例 10 県ごとのコンビニ店舗数の可視化
  11. 11. データビジュアライゼーションの定義 ● あるデータセットが、予め用意されたアルゴリズムを用い て、コンピュータによって描画されること。 ● その描画によってデータセットを眺めているだけではわから ない傾向や特徴が明らかになっていること。 ● アルゴリズムはコーディングによって定義され、形式知化/ 可視化されていること。 ● ソート、フィルター、トグルなどのインタラクションが可能で、 その場でその結果がすぐ得られること。 11 出典: http://visualizing.jp/infograph_vs_dataviz/
  12. 12. インフォグラフィックスとの対比 12 ● データをありのままに見せ、 見る人にデータを触らせる ● どちらかというとエンジニア サイドから出てきたもの ● 管理画面・ダッシュボードで 使われることが多い ● ストーリーに沿うようにデータを選 択してわかりやすく見せる ● どちらかというとデザイナサイドか ら出てきたもの ● ニュース記事で使われることが多 い インフォグラフィックスデータビジュアライズ
  13. 13. 最近のデータ可視化
  14. 14. 自己紹介 データ可視化の必要性 最近のデータ可視化 D3.jsを使ったデータ可視化 オープンソースプロジェクト「E2D3」の紹介 14
  15. 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
  16. 16. 最近データ可視化の流れ ウェブブラウザの機能が増え表現力が上がってきた ユーザの操作によるインタラクティブな表現の増加 いままでIE6,7,8がネックだった 報道にもデータ可視化の技術が使われるようになってきた データジャーナリズム 報道機関各社にデータビジュアライズ専門の部署ができは じめている 20
  17. 17. D3.jsを使ったデータ可視化
  18. 18. データ可視化の必要性 自己紹介 最近のデータ可視化 D3.jsを使ったデータ可視化 オープンソースプロジェクト「E2D3」の紹介 22
  19. 19. http://d3js.org/ 23
  20. 20. D3.jsについて ● Data Driven Document の略 ● データビジュアライズを作るのに必要なものを 集めたライブラリ ● ビジュアライズそのものを提供しているものではない ● Mike Bostock 作 ○ 今はThe New York Timesで グラフィックエディターをしている ● http://bost.ocks.org/mike/ 24
  21. 21. 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
  22. 22. Core データ操作や取得、アニメーション、色等の共通機能群 Scales データと描画座標の間の変換する機能群 SVG SVGのオブジェクトを作るための便利機能群 Time 時間の操作や文字列との間の変換機能群 Layouts データによる配置に関する機能群 Geography 地理データの射影などを行う機能群 Geometry ボロノイ図等の2次元の可視化表現を扱うための機能群 Behaviors ドラッグやズームなどを扱う機能群 D3.jsが提供する機能 26 https://github.com/mbostock/d3/wiki/API-Reference
  23. 23. D3.jsを試すのに便利な環境 JSFiddle http://jsfiddle.net/ HTML + CSS + JavaScript をブラウザ上で試せる環境 左側の「Frameworks & Extensions」から「D3」を選択すると D3.jsを簡単に試せる 27
  24. 24. 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を いじって最終的な画像を作り出す
  25. 25. 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>
  26. 26. D3.jsのビジュアライズの基本 SVGのDOMをいじって ● あたらしく図形を追加したり削除したり ● パスを変化させたり ● 地図を書いたり 30
  27. 27. 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
  28. 28. .enter() と .exit() .enter() ● selectAll()で取り出したDOM要素より紐付けられたデータが多ければ、その差 分の個数だけ空の箱を作成し返す ● 普通はその箱に対して.append()で要素を追加 ● 必要になったDOM要素をフェードインや画面外からのアニメーションで追加出来 る .exit() ● .enter()の逆でDOMが多い分だけそのDOM要素を返す ● いらなくなったDOM要素をフェードアウトさせつつ消したり出来る 32
  29. 29. .enter() 33 .data() .selectAll() .enter() http://jsfiddle.net/chimerast/bakt43od/1/
  30. 30. .exit() 34 .data() .selectAll() .exit()
  31. 31. 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
  32. 32. Transition 数値や属性を目的の値に徐々に変化させる仕組み アニメーションをするのに使う http://jsfiddle.net/chimerast/fdf6u5x7/ .attr('height', 0) // 元々の高さが0で .transition() .delay(2000) // 2秒間で .attr('height', 100); // 100の高さにする 36
  33. 33. Event 要素に対してイベントを追加する仕組み jQueryの.on()と変わらない http://jsfiddle.net/chimerast/g0b7sywe/ .on('click', function (d) { alert(d); }) 37
  34. 34. http://jsfiddle.net/chimerast/9bw84gdt/ まとめとして棒グラフを書いてみる 38
  35. 35. 例: http://bl.ocks.org/mbostock/3943967 並んだ棒グラフと積み上げをボタン一つで切り替え ※通常はふたつのグラフを並べる必要がある 棒グラフ(Bar Chart)もこんなリッチに 39
  36. 36. Coffee Flavour Wheel http://www.jasondavies.com/coffee-wheel/ 木構造が表現可能 -> 視覚的にブレイクダウンできる 円グラフ(Pie Chart)もこんなリッチに 40
  37. 37. Word Cloud http://www.jasondavies.com/wordcloud/#%2F%2Fwww.jasondavies. com%2Fwordcloud%2Fabout%2F もちろんExcelではできないことも 41
  38. 38. 「E2D3」の紹介
  39. 39. 自己紹介 データ可視化の必要性 最近のデータ可視化 D3.jsを使ったデータ可視化 オープンソースプロジェクト「E2D3」の紹介 43
  40. 40. OSSプロジェクト「E2D3」 E2D3: Excel to D3.js http://e2d3.org/ GitHub: https://github.com/e2d3/e2d3/ Officeストア にて配信中 Excel2013以上 もしくは ブラウザのOffice365上で動作 現在絶賛開発中 求むコントリビュータ—! 44
  41. 41. プロジェクトのミッション 全ての人にデータ可視化技術を データ可視化を作り上げるのはとても大変! 見かけたものをちょっと使ってみたいなと思っても 特にノンプラグラマには絶対無理 エンジニアが作ったデータ可視化のテンプレートに Excelからデータを流し込めると良いのでは? 45
  42. 42. デモ
  43. 43. ユースケース 営業・コンサルタント データを地図等にマッピング 収集したデータをインタラクティブに可視化 Webニュース記者・編集者 データジャーナリズム 読者にデータを触らせて気づかせる 47
  44. 44. 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
  45. 45. テンプレート開発はとっても簡単 https://github.com/e2d3/e2d3- contrib/tree/master/barchart-javascript main.jsを書くだけ ● root変数に描画すべき先のDOMノードが入っている ● update(data) 関数を定義するとシステム側から呼び出され dataにExcelのセルのデータが入ってくる ● dataを各種形式に変換する便利関数があります 49
  46. 46. Excelが無くても開発出来ます ブラウザとエディタとnode.jsさえあればOK 将来的にはブラウザだけで開発したい ファイルを保存すると勝手にブラウザの再読込がされる LiveReload機能付き! CoffeeScript, React(JSX)でも直接かけます! 実はD3.js使わずthree.jsつかったりもできる(IE11以上要) 50
  47. 47. E2D3の直近の開発予定 データ可視化テンプレートを簡単に公開・検索できる機能 現在はe2d3-contribレポジトリに追加すると公開 任意のGitHubのレポジトリ等を配信可能に 可視化されたデータを共有・利用できる機能 FacebookやTwitter等に可視化したデータをシェア JS/CSS/データを塊としてExportしブログ等に追加 51
  48. 48. 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
  49. 49. まとめ ● モダンブラウザの普及によりデータビジュアライズが当たり 前の技術になり始めています ● D3.jsを使うとデータビジュアライズを比較的簡単に作れま す ● E2D3が普及すると、プログラマ以外もデータビジュアライズ の恩恵を受けられるようになります 53
  50. 50. 提 供 全ての人にデータ可視化技術を

×