データ可視化　勉強会　発表資料 http://www.zusaar.com/event/3927003 デモ資料 https://github.com/bicycle1885/sochi-visualization

1. 実践! D3.jsで可視化入門
データ可視化 勉強会
佐藤 建太 (@bicycle1885)

2. 自己紹介
•
佐藤 建太
•
Twitter: @bicycle1885
•
東京大学 農学部
•
バイオインフォマティクスが専門
•
Julia langがマイブーム

3. 経緯

6. その後、

8. ということで、
可視化をしました。

9. 可視化って色々できる
コミットログ
タンパク質
遺伝的変異と病気の関係
交響曲

10. 今回は、

11. The Sochi 2014 Winter Olympics

12. Demo

13. ツールとサービス

14. 使ったサービス&ツール
•
データ集め
•
kimono
•
•
ソチ五輪のデータAPIを提供している
•
•
ウェブサイトをAPI化してくれるサービス
これがないと死んでいた
Phoca Flag Icons
•
•
国旗の画像をPublic Domainで提供
Natural Earth
• 地図データ
•
国名・都市名などのアノテーション付き

15. 使ったサービス&ツール
•
前処理
•
jq
•
•
•
JSONの前処理用コマンドラインツール
kimonoのレスポンスがJSON形式だったので、jqを使っ
て都合のいいように加工
pandas
• Pythonのデータ分析等ができるライブラリ
•
RDBのような表形式のデータの読み書き・選択・結合に
便利
•
国のIDの対応をつけたりなど、名寄せ的な作業に使用
•
IPythonからインタラクティブに使える

16. 使ったサービス&ツール
•
前処理
•
GDAL
•
•
•
地図データのフォーマット変換ツール
.shp => .json
mapshaper
•
•
•
地図データの変換や単純化
.json => topojson
他、perlのスクリプトやワンライナーなど

17. 使ったサービス&ツール
•
可視化
•
d3.js
• Mike Bostock氏謹製の可視化ライブラリ
•
topojson
• Mike Bostock氏謹製のtopojson形式の変換ツールで
あり読み込みツール
•
queue
• Mike Bostock氏謹製の非同期処理ライブラリ
•
複数ファイルを非同期に読み込んで、１つのコール
バック関数で受ける事ができる

18. 可視化の手順

19. 1. ラフに全体像を紙に書く

20. 2. 残りの部分を可視化する

21. http://www.reddit.com/r/pics/comments/d3zhx/how_to_draw_an_owl/

22. Just kidding :)

23. 1. 可視化したいデータを読み込んで
配列にし、要素に結びつける
例) アスリートのオブジェクトの
selection
.data(array)
.enter()
配列をcircle要素に結びつける
The Grammar of
Graphicsでは
geomに対応
{athlete1}
{athlete2}
circle2
{athlete2}
circle3
{athleteN}
JSON
CSV
XML
circle1
circleN
配列
SVGの要素
地図データのような複雑なデータも!
国ごとの配列にしてpathに結びつける事ができる

24. 2. スケール (scale) を設定する
一つひとつのデータについて、
scaleを使ってマッピングをする
{datum}
d3.scale.domain()!
メソッドに対応
scale
特徴
d3.scale.range()!
メソッドに対応
例) 一人のアスリートを、scaleAgeで年齢に対応づける
The Grammar of Graphicsでもscaleという概念がある

25. 3. 座標系の設定を設定して画面に映す
•
svg要素は、それぞれ座標系を持っているためデータをscaleで写した
特徴に座標系を与える必要がある
•
この座標系が、ブラウザでの位置に対応する
The Grammar of Graphicsではcoordに対応
•
transform属性で座標系を変換できる
x
scale
RGBやHSLなどの!
色の座標系をとることもある
y

26. コツ

27. レイヤー化
•
The Grammar of Graphicsにならってレイヤー化
•
javascriptの変数名もレイヤーに対応させるといいかも
•
軸のレイヤー axesLayer
•
ラベルのレイヤー labelsLayer
•
地図のレイヤー mapLayer
•
アスリートのレイヤー athletesLayer

28. d3.jsでのレイヤー化の利点
•
要素が混ざらないので操作対象を選択しやすい
•
•
軸レイヤーと同じtickクラスを別のレイヤーで使っても大丈夫
要素の上下関係が分かりやすい
•
•
•
svgに直接要素を描画していくと、望んでない要素が手前に来たりする
最初に必要なレイヤーをすべて作り、その上に要素を載せていくことで表示
の上下関係がコントロールしやすい
座標系の分離ができる
•
•
g要素でレイヤーをつくることで、それぞれのレイヤーで座標系が分離できる
レイヤー毎にCSSの名前を分けられる
•
Sass/Lessとかとも相性が良い

29. レイヤー化されてる様子
クラス名 background, map, country-name,
labels, athletes, axes がそれぞれレイヤー

30. 色の選択
ColorHexa
HSL Color Picker
色の組み合わせを選べる
色の微調整ができる

31. GET /complicated_question.html HTTP/1.1
Host: @bicycle1885
HTTP/1.1 301 Moved Permanently
Location: @muddydixon

32. まとめ
•
配列の要素をSVGの要素へ結びつける
•
scaleを設定して個々のデータから特徴空間へ写す
•
特徴空間の点をブラウザ上の座標系へ写す
•
レイヤー化するとjavascriptもCSSも見通しよい
•
RGBで色の調節は厳しいが、HSLならやりやすい

33. 参考資料
オススメ!
•
julia http://julialang.org/
•
jq http://stedolan.github.io/jq/
•
pandas http://pandas.pydata.org/
•
GDAL http://www.gdal.org/
•
mapshaper http://www.mapshaper.org/
•
mbostock/d3.js http://d3js.org
•
mbostock/topojson https://github.com/mbostock/topojson
•
mbostock/queue https://github.com/mbostock/queue
•
SVG 1.1 Coordinate Systems, Transformations and Units http://www.w3.org/TR/SVG/coords.html
•
Interactive Map with d3.js http://www.tnoda.com/blog/2013-12-07
•
Interactive Data Visualization for the Web (O’Reilly) http://chimera.labs.oreilly.com/books/1230000000345
•
A Layered Grammar of Graphics http://www.stat.columbia.edu/~gelman/bayescomputation/Wickham2010.pdf
•
VIZBI: D3 Workshop http://bost.ocks.org/mike/d3/workshop
•
The (un)official Sochi Olympics API http://www.kimonolabs.com/sochi/explorer
•
Natural Earth http://www.naturalearthdata.com/
•
Phoca Flag Icons - Flags of the World http://www.phoca.cz/flag-icons
•
ColorHexa http://www.colorhexa.com/
•
HSL Color Picker http://hslpicker.com/
オススメ!
オススメ!
オススメ!