Download to read offline
Uploaded by圭輔 大曽根
1,736 views
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
【#techbuzz】8/24 第16回 HTML5+JS 勉強会【テーマ：HTML5とデータ可視化とExcel / スマートTVとwebの未来予想】でのプレゼンテーション資料になります
Recommended
More Related Content
More from 圭輔 大曽根
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
- 1.Copyright 2015 CYBIRDCo., Ltd.HTML5とデータ可視化とExcel株式会社サイバードデータアナリスト 博士 (工学)大曽根 圭輔【#techbuzz】8/24 第16回 HTML5+JS 勉強会1
- 2.自己紹介•大曽根圭輔 @dr_paradi 博士(工学) 茨城県出身•現在の仕事 ゲームのデータ分析•趣味たくさん - やる: バンド、スポーツ (フットサル、ランニング) - 観る: スポーツ、ライブ 2
- 3.自己紹介•大曽根圭輔 @dr_paradi 博士(工学) 茨城県出身•現在の仕事 ゲームのデータ分析•趣味たくさん - やる: バンド、スポーツ (フットサル、ランニング) - 観る: スポーツ、ライブ 3
- 4.自己紹介•大曽根圭輔 @dr_paradi 博士(工学) 茨城県出身•現在の仕事 ゲームのデータ分析•趣味たくさん - やる: バンド、スポーツ (フットサル、ランニング) - 観る: スポーツ、ライブ 4
- 5.目次5•データ可視化の重要性•復習 HTML5•データ活用の流れ (弊社事例)•データ可視化におけるHTML5の役割+ D3.js•E2D3の紹介
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.目次18•データ可視化の重要性•復習 HTML5•データ活用の流れ (弊社事例)•データ可視化におけるHTML5の役割+ D3.js•E2D3の紹介
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.ブラウザ上でのデータ可視化The Wealth &Health of Nationshttp://bost.ocks.org/mike/nations/Four Ways to Slice Obama’s 2013 Budget Proposalhttp://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.htmlThe Facebook Offering: How It Compareshttp://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html25
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.目次31•データ可視化の重要性•復習 HTML5•データ活用の流れ (弊社事例)•データ可視化におけHTML5の役割+ D3.js•E2D3の紹介
- 32.HTML5 復習32• Graphics•Device Access• Multi Media• Web Components• Offline Web Application• Realtime Connectivity
- 33.HTML5 復習33• Graphics•Device Access• Multi Media• Web Components• Offline Web Application• Realtime Connectivity
- 34.Graphics-> グラフィックの表現が豊富制御が簡単に34• SVG•WebGL• Canvas
- 35.Offline Web Application->通信を減らすことができる ※データの整形、取得には時間がかかることが多いため35• Application Cache• Web Storage• Service Workers• Online Offline Events• File System API
- 36.
- 37.目次37•データ可視化の重要性•復習 HTML5•データ活用の流れ (弊社事例)•データ可視化におけHTML5の役割+ D3.js•E2D3の紹介
- 38.データ活用の流れ分析環境概要図Amazon RDSAmazon EMRAmazonS3Amazon EC2DBWEB/アプリデータ転送用データフロー処理コマンド分析環境各サービスアナリストプロデューサディレクタ38
- 39.
- 40.
- 41.
- 42.
- 43.Copyright 2015 CYBIRDCo., Ltd.可視化ツール(BIツール)• 自社開発のモニタリングツール• データを可視化し、複数のタイトルの状況を複数の指標で確認43
- 44.
- 45.目次45•データ可視化の重要性•復習 HTML5•データ活用の流れ (弊社事例)•データ可視化におけHTML5の役割+ D3.js•E2D3の紹介
- 46.
- 47.HTML5 復習47• Graphics•Device Access• Multi Media• Web Components• Offline Web Application• Realtime Connectivity
- 48.SVG (Scalable VectorGraphics)https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics48• ベクターグラフィックできれい• Canvasに比べてインタラクティブなUIを作りやすい（内部的にDOMを持つため）
- 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.SVG + CSSrect{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.イベント<svg width="120" height="120"> <rectx="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.D3.jsについてData Driven Documentの略データビジュアライズを作るのに必要なものを 集めたライブラリビジュアライズそのものを提供しているものではないMike Bostock 作今はThe New York Timesで グラフィックエディターをしているhttp://bost.ocks.org/mike/52
- 53.
- 54.Core データ操作や取得、アニメーション、色等の共通機能群Scales データと描画座標の間の変換する機能群SVGSVGのオブジェクトを作るための便利機能群Time 時間の操作や文字列との間の変換機能群Layouts データによる配置に関する機能群Geography 地理データの射影などを行う機能群Geometry ボロノイ図等の2次元の可視化表現を扱うための機能群Behaviors ドラッグやズームなどを扱う機能群D3.jsが提供する機能54https://github.com/mbostock/d3/wiki/API-Reference
- 55.D3.jsのいいところとにかくサンプルが多いd3.js Gallery (https://github.com/mbostock/d3/wiki/Gallery)bl.ocks.org (http://bl.ocks.org/)Gistに上がっているデータ可視化表現を描画してくれるサイトMikeBostock のものを見るだけでもおなかいっぱい(849個) (http://bl.ocks.org/mbostock)55
- 56.
- 57.目次57•データ可視化の重要性•復習 HTML5•データ活用の流れ (弊社事例)•データ可視化におけHTML5の役割+ D3.js•E2D3の紹介
- 58.
- 59.E2D3紹介E2D3: Excel toD3.jsOSSプロジェクト全ての人にデータ可視化技術をExcel上でデータを入力し、人の作った データ可視化プログラムで可視化を行える30人ぐらいの人がコントリビュータとして ゆるく関わっています59
- 60.
- 61.OSSプロジェクト「E2D3」E2D3: Excel toD3.js http://e2d3.org/GitHub: https://github.com/e2d3/e2d3/Officeストア にて配信中Excel2013以上 もしくは ブラウザのOffice365上で動作現在絶賛開発中求むコントリビュータ—！61
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.