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.

2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」

1,092 views

Published on

【#techbuzz】8/24 第16回 HTML5+JS 勉強会【テーマ:HTML5とデータ可視化とExcel / スマートTVとwebの未来予想】でのプレゼンテーション資料になります

Published in: Technology
  • Be the first to comment

2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」

  1. 1. Copyright 2015 CYBIRD Co., Ltd. HTML5とデータ可視化 とExcel 株式会社サイバード データアナリスト 博士 (工学) 大曽根 圭輔 【#techbuzz】8/24 第16回 HTML5+JS 勉強会 1
  2. 2. 自己紹介 •大曽根圭輔
 @dr_paradi 
 博士(工学) 茨城県出身 •現在の仕事
 ゲームのデータ分析 •趣味 たくさん
 - やる: バンド、スポーツ (フットサル、ランニング)
 - 観る: スポーツ、ライブ
 2
  3. 3. 自己紹介 •大曽根圭輔
 @dr_paradi 
 博士(工学) 茨城県出身 •現在の仕事
 ゲームのデータ分析 •趣味 たくさん
 - やる: バンド、スポーツ (フットサル、ランニング)
 - 観る: スポーツ、ライブ
 3
  4. 4. 自己紹介 •大曽根圭輔
 @dr_paradi 
 博士(工学) 茨城県出身 •現在の仕事
 ゲームのデータ分析 •趣味 たくさん
 - やる: バンド、スポーツ (フットサル、ランニング)
 - 観る: スポーツ、ライブ
 4
  5. 5. 目次 5 •データ可視化の重要性 •復習 HTML5 •データ活用の流れ (弊社事例) •データ可視化におけるHTML5の役割 + D3.js •E2D3の紹介
  6. 6. の前に 6
  7. 7. HTML5 と データ(解析)って関連あるの? 7
  8. 8. 私の経歴 8 2012
 エンジニア(HTML5とかCSS + Objective-C) 2013
 データアナリスト 2014 データアナリスト兼フロントエンジニア
  9. 9. HTML5を用いた セマンティックな文書作成 
 ゲーム事業本部 事業統括部
 大曽根圭輔 2 0 1 2 年 の 発 表 内 容 2012/12/13 HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 ∼先行事例紹介/交流会∼
  10. 10. 現在の業務 •スマホ向けのWebサイトを作ったり •iOSのアプリ作ったり •Facebookアプリ作ったり。。。 2 0 1 2 年 の 発 表 内 容 2012/12/13 HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 ∼先行事例紹介/交流会∼
  11. 11. 2013年某日 2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話
  12. 12. 偉い人 会社のゲームも軌道に乗ってきたので、 データ分析に力を入れたい。 君の経験を買ってデータアナリストに なって欲しい 私 2 0 1 4 年 の 発 表 内 容 2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話
  13. 13. 偉い人 会社のゲームも軌道に乗ってきたので、 データ分析に力を入れたい。 君の経験を買ってデータアナリストに なって欲しい 私 まかせて下さい! 2 0 1 4 年 の 発 表 内 容 2014/06/13 若手Webエンジニア交流会発表資料「博士課程の新卒エンジニアがデータ分析環境を作った話
  14. 14. 14 HTML5(+JavaScript)エンジニア から データアナリストに転向
  15. 15. 15 過去のスキルは活用できるのか?
  16. 16. 16 データ可視化 で活用できました!
  17. 17. 17 今回は (一見)関係なさそうに見える データ解析(≒ビッグデータ) と HTML5 についてお話しします
  18. 18. 目次 18 •データ可視化の重要性 •復習 HTML5 •データ活用の流れ (弊社事例) •データ可視化におけるHTML5の役割 + D3.js •E2D3の紹介
  19. 19. データ可視化の重要性 データ可視化への注目 19 •データドリブンな意思決定に注目が集まる
 (≒ビッグデータ) •人間は大きな(複雑なデータ)を認識できない •データを人の目で知覚可能な形へと「可視化」する
  20. 20. データ可視化の例 都市ごとの気温の変化 20
  21. 21. データ可視化の例 都市ごとの気温の変化 21
  22. 22. データ可視化の例 県ごとのコンビニ店舗数の可視化 22
  23. 23. データ可視化の例 県ごとのコンビニ店舗数の可視化 23
  24. 24. 24 こういうグラフを HTML5 + CSSで 書けます!
  25. 25. ブラウザ上でのデータ可視化 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 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 最近データ可視化の流れ ウェブブラウザの機能が増え表現力が上がってきた ユーザの操作によるインタラクティブな表現の増加 いままではIE6,7,8がネック 29
  30. 30. 本日紹介するグラフは、 30 でできています
  31. 31. 目次 31 •データ可視化の重要性 •復習 HTML5 •データ活用の流れ (弊社事例) •データ可視化におけHTML5の役割 + D3.js •E2D3の紹介
  32. 32. HTML5 復習 32 • Graphics • Device Access • Multi Media • Web Components • Offline Web Application • Realtime Connectivity
  33. 33. HTML5 復習 33 • Graphics • Device Access • Multi Media • Web Components • Offline Web Application • Realtime Connectivity
  34. 34. Graphics -> グラフィックの表現が豊富 制御が簡単に 34 • SVG • WebGL • Canvas
  35. 35. Offline Web Application -> 通信を減らすことができる
  ※データの整形、取得には時間がかかることが多いため 35 • Application Cache • Web Storage • Service Workers • Online Offline Events • File System API
  36. 36. アニメーション 36 • Meaningful Transition
 http://www.google.com/design/spec/ animation/meaningful-transitions.html
  37. 37. 目次 37 •データ可視化の重要性 •復習 HTML5 •データ活用の流れ (弊社事例) •データ可視化におけHTML5の役割 + D3.js •E2D3の紹介
  38. 38. データ活用の流れ 分析環境概要図 Amazon RDS Amazon EMR Amazon S3 Amazon EC2 DB WEB/アプリ データ転送用 データフロー 処理コマンド 分析環境 各サービス アナリスト プロデューサ ディレクタ 38
  39. 39. 各サービス いままで 管理ツール 集計 可視化 管理ツール 集計 可視化 管理ツール 集計 可視化 管理ツール 集計 可視化 ・・・ ・・・ ・・・ ・・・ 39 各サービス 各サービス 各サービス
  40. 40. 各サービス いままで 管理ツール 集計 可視化 管理ツール 集計 可視化 管理ツール 集計 可視化 管理ツール 集計 可視化 ・・・ ・・・ ・・・ ・・・ 40 各サービス 各サービス 各サービス
  41. 41. 各サービス 現在 各サービス 各サービス 各サービス ・・・ 集計 可視化 ・・・ 41
  42. 42. 各サービス 現在 各サービス 各サービス 各サービス ・・・ 集計 可視化 ・・・ 42
  43. 43. Copyright 2015 CYBIRD Co., Ltd. 可視化ツール(BIツール) • 自社開発のモニタリングツール • データを可視化し、複数のタイトルの 状況を複数の指標で確認 43
  44. 44. 各サービス 現在 各サービス 各サービス 各サービス ・・・ 集計 可視化 ・・・ 44
  45. 45. 目次 45 •データ可視化の重要性 •復習 HTML5 •データ活用の流れ (弊社事例) •データ可視化におけHTML5の役割 + D3.js •E2D3の紹介
  46. 46. http://d3js.org/ 46
  47. 47. HTML5 復習 47 • Graphics • Device Access • Multi Media • Web Components • Offline Web Application • Realtime Connectivity
  48. 48. SVG (Scalable Vector Graphics) https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics 48 • ベクターグラフィックできれい • Canvasに比べてインタラクティブなUIを作りや すい(内部的にDOMを持つため)
  49. 49. XMLをベースにした2次元ベクター画像フォーマット 最近のブラウザがサポート: IE9以上, Firefox, Chrome <svg width="120" height="120">
 <rect x="10" y="10" width="100" height="100"rx="15" ry="15" />
 </svg> 基本D3.jsはSVG DOM Nodeを いじって最終的な画像を作り出す SVG (Scalable Vector Graphics) 49
  50. 50. SVG + CSS 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> 50
  51. 51. イベント <svg width="120" height="120">
 <rect x="10" y="10" width="100" height="100"rx="15" ry="15" />
 </svg> d3.selectAll(”rect”) .on(“click”, function () { d3.select(this) .style(“fill”, “#F00”) }); 51
  52. 52. D3.jsについて Data Driven Document の略 データビジュアライズを作るのに必要なものを
 集めたライブラリ ビジュアライズそのものを提供しているものではない Mike Bostock 作 今はThe New York Timesで
 グラフィックエディターをしている http://bost.ocks.org/mike/ 52
  53. 53. D3.jsのビジュアライズの基本 53 SVGのDOMをいじって あたらしく図形を追加したり削除したり パスを変化させたり 地図を書いたり
  54. 54. Core データ操作や取得、アニメーション、色等の共通機能群 Scales データと描画座標の間の変換する機能群 SVG SVGのオブジェクトを作るための便利機能群 Time 時間の操作や文字列との間の変換機能群 Layouts データによる配置に関する機能群 Geography 地理データの射影などを行う機能群 Geometry ボロノイ図等の2次元の可視化表現を扱うための機能群 Behaviors ドラッグやズームなどを扱う機能群 D3.jsが提供する機能 54 https://github.com/mbostock/d3/wiki/API-Reference
  55. 55. 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) 55
  56. 56. D3.jsのいけてないところ 56 •覚えることが多い、意外と処理が複雑
 -> そもそもデータ可視化が難しい •デザイン、データ分析、ビジネス理解など複数の知 識が必要
 (そんなエンジニアなかなかいない)
 -> データ可視化を必要とする営業やアナリスト
  が使うことができない
  57. 57. 目次 57 •データ可視化の重要性 •復習 HTML5 •データ活用の流れ (弊社事例) •データ可視化におけHTML5の役割 + D3.js •E2D3の紹介
  58. 58. 58
  59. 59. E2D3紹介 E2D3: Excel to D3.js OSSプロジェクト 全ての人にデータ可視化技術を Excel上でデータを入力し、人の作った
 データ可視化プログラムで可視化を行える 30人ぐらいの人がコントリビュータとして
 ゆるく関わっています 59
  60. 60. 全ての人にデータ可視化技術を データ可視化を作り上げるのはとても大変! 見かけたものをちょっと使ってみたいなと思っても 特にノンプラグラマには絶対無理 エンジニアが作ったデータ可視化のテンプレートに Excelからデータを流し込めると良いのでは? プロジェクトのミッション 60
  61. 61. OSSプロジェクト「E2D3」 E2D3: Excel to D3.js http://e2d3.org/ GitHub: https://github.com/e2d3/e2d3/ Officeストア にて配信中 Excel2013以上 もしくは ブラウザのOffice365上で動作 現在絶賛開発中 求むコントリビュータ—! 61
  62. 62. デモ 62
  63. 63. 各サービス いままで 管理ツール 集計 可視化 各サービス 管理ツール 集計 可視化 各サービス 管理ツール 集計 可視化 各サービス 管理ツール 集計 可視化 ・・・ ・・・ ・・・ ・・・ 63
  64. 64. 各サービス 現在 各サービス 各サービス 各サービス ・・・ 集計 可視化 ・・・ 64
  65. 65. 各サービス 未来? 各サービス 各サービス 各サービス ・・・ 集計 可視化 65
  66. 66. まとめ 66
  67. 67. データ可視化の重要性 データ可視化への注目 67 •データドリブンな意思決定に注目が集まる
 (≒ビッグデータ) •人間は大きな(複雑なデータ)を認識できない •データを人の目で知覚可能な形へと「可視化」する
  68. 68. 68 データ可視化 に注目が集まる
  69. 69. 69
  70. 70. 70
  71. 71. 71
  72. 72. 72 ダイナミックでインタラクティ なグラフが書ける
  73. 73. 73 D3.jsでデータビジュアライズ を比較的簡単に作れる
  74. 74. 74 E2D3で プログラマ以外もデータ可視化!
  75. 75. ご静聴ありがとうございました! 75

×