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
55
データ可視化的ななにか #TechLunch
データ可視化的ななにか
2014/03/12 (水) @ Livesense TechLunch
発表者:渡邊 直登
Livesense Inc.
PRO
April 23, 2014
Tweet
Share
More Decks by Livesense Inc.
See All by Livesense Inc.
27新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
0
550
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
25
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.4k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
410
26新卒_総合職採用_会社説明資料
livesense
PRO
0
9.3k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
29k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
12k
中途セールス職_会社説明資料
livesense
PRO
0
250
EM候補者向け転職会議説明資料
livesense
PRO
0
120
Other Decks in Technology
See All in Technology
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
三視点LLMによる複数観点レビュー
mhlyc
0
230
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1.1k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
320
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
380
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
420
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Facilitating Awesome Meetings
lara
54
6.5k
Being A Developer After 40
akosma
90
590k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Become a Pro
speakerdeck
PRO
29
5.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Invisible Side of Design
smashingmag
301
51k
4 Signs Your Business is Dying
shpigford
184
22k
Embracing the Ebb and Flow
colly
86
4.8k
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弄った人ならすぐ使える • グラフィカルな可視化だからこそ見えるものものある ◦ フォントサイズだったり比較可能な図だったり •
円グラフは使うな ◦ 帯グラフとか棒グラフをつかうとよい
ちなみに
簡単にデータ可視化ができるよ
ご清聴ありがとうございました