実践! D3.jsで可視化入門データ可視化 勉強会

佐藤 建太 (@bicycle1885)

自己紹介• 佐藤 建太

• Twitter: @bicycle1885

• 東京大学 農学部

• バイオインフォマティクスが専門

• Julia langがマイブーム

経緯

その後、

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

可視化って色々できる

タンパク質

交響曲

コミットログ

遺伝的変異と病気の関係

今回は、

The Sochi 2014 Winter Olympics

Demo

ツールとサービス

使ったサービス&ツール• データ集め

• kimono • ウェブサイトをAPI化してくれるサービス

• ソチ五輪のデータAPIを提供している

• これがないと死んでいた

• Phoca Flag Icons • 国旗の画像をPublic Domainで提供

• Natural Earth • 地図データ

• 国名・都市名などのアノテーション付き

使ったサービス&ツール• 前処理

• jq • JSONの前処理用コマンドラインツール • kimonoのレスポンスがJSON形式だったので、jqを使って都合のいいように加工

• pandas • Pythonのデータ分析等ができるライブラリ • RDBのような表形式のデータの読み書き・選択・結合に便利

• 国のIDの対応をつけたりなど、名寄せ的な作業に使用 • IPythonからインタラクティブに使える

使ったサービス&ツール• 前処理

• GDAL • 地図データのフォーマット変換ツール

• .shp => .json • mapshaper

• 地図データの変換や単純化

• .json => topojson • 他、perlのスクリプトやワンライナーなど

使ったサービス&ツール• 可視化

• d3.js • Mike Bostock氏謹製の可視化ライブラリ

• topojson • Mike Bostock氏謹製のtopojson形式の変換ツールであり読み込みツール

• queue • Mike Bostock氏謹製の非同期処理ライブラリ • 複数ファイルを非同期に読み込んで、１つのコールバック関数で受ける事ができる

可視化の手順

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

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

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

Just kidding :)

1. 可視化したいデータを読み込んで 配列にし、要素に結びつける

{athlete1}

配列

{athlete2}

{athleteN}

{athlete2}

selection .data(array) .enter()

circle1circle2circle3

circleN

SVGの要素

JSONCSV

XML

地図データのような複雑なデータも!国ごとの配列にしてpathに結びつける事ができる

例) アスリートのオブジェクトの配列をcircle要素に結びつける

The Grammar of Graphicsではgeomに対応

2. スケール (scale) を設定する

一つひとつのデータについて、scaleを使ってマッピングをする

{datum}scale

特徴d3.scale.domain()!メソッドに対応

d3.scale.range()!メソッドに対応

例) 一人のアスリートを、scaleAgeで年齢に対応づける

The Grammar of Graphicsでもscaleという概念がある

3. 座標系の設定を設定して画面に映す• svg要素は、それぞれ座標系を持っているためデータをscaleで写した特徴に座標系を与える必要がある

• この座標系が、ブラウザでの位置に対応する

• transform属性で座標系を変換できる

RGBやHSLなどの!色の座標系をとることもある

scale

y

x

The Grammar of Graphicsではcoordに対応

コツ

レイヤー化• The Grammar of Graphicsにならってレイヤー化

• javascriptの変数名もレイヤーに対応させるといいかも

• 軸のレイヤー axesLayer

• ラベルのレイヤー labelsLayer

• 地図のレイヤー mapLayer

• アスリートのレイヤー athletesLayer

d3.jsでのレイヤー化の利点• 要素が混ざらないので操作対象を選択しやすい

• 軸レイヤーと同じtickクラスを別のレイヤーで使っても大丈夫

• 要素の上下関係が分かりやすい

• svgに直接要素を描画していくと、望んでない要素が手前に来たりする

• 最初に必要なレイヤーをすべて作り、その上に要素を載せていくことで表示の上下関係がコントロールしやすい

• 座標系の分離ができる

• g要素でレイヤーをつくることで、それぞれのレイヤーで座標系が分離できる

• レイヤー毎にCSSの名前を分けられる

• Sass/Lessとかとも相性が良い

レイヤー化されてる様子

クラス名 background, map, country-name, labels, athletes, axes がそれぞれレイヤー

色の選択ColorHexa

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

GET /complicated_question.html HTTP/1.1 Host: @bicycle1885

HTTP/1.1 301 Moved Permanently Location: @muddydixon

まとめ• 配列の要素をSVGの要素へ結びつける

• scaleを設定して個々のデータから特徴空間へ写す

• 特徴空間の点をブラウザ上の座標系へ写す

• レイヤー化するとjavascriptもCSSも見通しよい

• RGBで色の調節は厳しいが、HSLならやりやすい

参考資料• 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/

オススメ!

オススメ!

オススメ!オススメ!