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
200
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
16
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.4k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
390
26新卒_総合職採用_会社説明資料
livesense
PRO
0
8.9k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
27k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
12k
中途セールス職_会社説明資料
livesense
PRO
0
250
EM候補者向け転職会議説明資料
livesense
PRO
0
120
Other Decks in Technology
See All in Technology
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.7k
Model Mondays S2E03: SLMs & Reasoning
nitya
0
330
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
14k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
410
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
6
5k
Connect 100+を支える技術
kanyamaguc
0
180
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.2k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
220
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
280
Operating Operator
shhnjk
0
430
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
130
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
What's in a price? How to price your products and services
michaelherold
246
12k
KATA
mclloyd
30
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building Applications with DynamoDB
mza
95
6.5k
A Modern Web Designer's Workflow
chriscoyier
694
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Practical Orchestrator
shlominoach
188
11k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Automating Front-end Workflow
addyosmani
1370
200k
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弄った人ならすぐ使える • グラフィカルな可視化だからこそ見えるものものある ◦ フォントサイズだったり比較可能な図だったり •
円グラフは使うな ◦ 帯グラフとか棒グラフをつかうとよい
ちなみに
簡単にデータ可視化ができるよ
ご清聴ありがとうございました