Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
データ可視化的ななにか #TechLunch
Search
Livesense Inc.
PRO
April 23, 2014
Technology
0
46
データ可視化的ななにか #TechLunch
データ可視化的ななにか
2014/03/12 (水) @ Livesense TechLunch
発表者:渡邊 直登
Livesense Inc.
PRO
April 23, 2014
Tweet
Share
More Decks by Livesense Inc.
See All by Livesense Inc.
コロナで失われたノベルティ作成ノウハウを復活させた話
livesense
PRO
0
67
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
330
転職会議でGPT-3を活用した企業口コミ要約機能をリリースした話
livesense
PRO
0
1k
株式会社リブセンス マッハバイト_プレイブック
livesense
PRO
0
380
Tech Award 2021 選出方法
livesense
PRO
0
980
株式会社リブセンス エンジニアリング組織を支える風土と制度
livesense
PRO
0
510
株式会社リブセンス・マッハバイト 採用候補者様向け資料
livesense
PRO
0
210
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
2k
brain.optimizerのレコメンド取得API
livesense
PRO
0
2.1k
Other Decks in Technology
See All in Technology
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
2
240
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
SREsのためのSRE定着ガイド
netmarkjp
10
1.6k
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
11k
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
Cloud Deploy と仲良くなりたい
phaya72
1
100
統計的学習理論読み Chapter 2
kmatsui
1
190
10分でわかるfreeeのQA
freee
0
220
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
160
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Unsuck your backbone
ammeep
660
56k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Web development in the modern age
philhawksworth
201
10k
Done Done
chrislema
178
15k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Ruby is Unlike a Banana
tanoku
95
10k
The Cult of Friendly URLs
andyhume
72
5.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Transcript
データ可視化的な なにか
データ可視化の前に
可視化
可視化? 人間が直接「見る」ことのできない現象・事象・関係 性を「見る」ことのできるもの(画像・グラフ・図・表 など)にすること wikipedia - 可視化
かんばんとか
相関図とか
じゃあデータ可視化は?
データ可視化のイメージ
データ可視化のイメージ
データ可視化のイメージ
データ可視化のイメージ
データ可視化のイメージ
データ可視化のイメージ
データ可視化 データ可視化の大目的は、明瞭かつ効果的に情 報とコミュニケーションができるように、データを視 覚化する能力そのものである Vitaly Friedman
データ可視化 データ可視化の大目的は、明瞭かつ効果的に情 報とコミュニケーションができるように、データを視 覚化する能力そのものである Vitaly Friedman
明瞭かつ効果的にデータを可視化
明瞭かつ効果的? http://artzub.com/d3/wbca/
おしゃんてぃなビジュアルがあれば OK!というわけではない ※おしゃんてぃなビジュアルは見ている分には楽しいです
たとえば
たとえば http://shimz.me/example/d3js/geo_example/geo8/
データに基づいてドキュメントを構築すると データ可視化に近づきそうだ
実際に可視化してみる
データを可視化するツール
データを可視化するツール
データを可視化するツール
比較可能な状態
d3.js • データに基づいてドキュメントを操作するための JavaScript ライブラリ • HTML や SVG、 CSSを使ってデータに命を吹き込む
• 表現方法ではなく変換方法 • コードが簡潔に書ける • jQueryっぽく書ける
サンプル・ライブラリが豊富 https://github.com/mbostock/d3/wiki/Gallery
事例が豊富
d3.jsの基本的な使い方 • 要素の選択 ◦ d3.select('body') • データをバインディングする要素の選択 ◦ d3.select('body').selectAll('p') •
データをバインド ◦ d3.select('body').selectAll('p').data(a) • d3オブジェクトを作成 ◦ d3.select('body').selectAll('p').data(a).enter() • 要素を追加 ◦ d3.select('body').selectAll('p').data(a).enter().append('p')
実際に可視化してみる • 検索クエリの表示回数とクリック数可視化 ◦ 表 ◦ Bubble Chart ◦ Word
Cloud
実際に可視化してみて • d3.jsすごい簡単 ◦ jQuery弄った人ならすぐ使える • グラフィカルな可視化だからこそ見えるものものある ◦ フォントサイズだったり比較可能な図だったり •
円グラフは使うな ◦ 帯グラフとか棒グラフをつかうとよい
ちなみに
簡単にデータ可視化ができるよ
ご清聴ありがとうございました