データ可視化的ななにか #TechLunch

データ可視化的ななにか

データ可視化の前に

可視化

可視化？人間が直接「見る」ことのできない現象・事象・関係性を「見る」ことのできるもの（画像・グラフ・図・表など）にすること wikipedia - 可視化

かんばんとか

相関図とか

じゃあデータ可視化は？

データ可視化のイメージ

データ可視化データ可視化の大目的は、明瞭かつ効果的に情報とコミュニケーションができるように、データを視覚化する能力そのものである 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弄った人ならすぐ使える • グラフィカルな可視化だからこそ見えるものものある ◦ フォントサイズだったり比較可能な図だったり •
円グラフは使うな ◦ 帯グラフとか棒グラフをつかうとよい

ちなみに

簡単にデータ可視化ができるよ

ご清聴ありがとうございました

データ可視化的ななにか #TechLunch

データ可視化的ななにか #TechLunch

More Decks by Livesense Inc.

Other Decks in Technology

Featured

Transcript