Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
実践! D3.jsで可視化入門
データ可視化 勉強会
佐藤 建太 (@bicycle1885)
自己紹介
•

佐藤 建太
•

Twitter: @bicycle1885

•

東京大学 農学部

•

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

•

Julia langがマイブーム
経緯
その後、
ということで、
可視化をしました。
可視化って色々できる

コミットログ

タンパク質

遺伝的変異と病気の関係
交響曲
今回は、
The Sochi 2014 Winter Olympics
Demo
ツールとサービス
使ったサービス&ツール
•

データ集め
•

kimono
•
•

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

•
•

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

これがないと死んでいた

Phoca Flag Icons
•

•

国旗の...
使ったサービス&ツール
•

前処理
•

jq
•
•

•

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

pandas
• Pythonのデータ分析等ができ...
使ったサービス&ツール
•

前処理
•

GDAL
•
•

•

地図データのフォーマット変換ツール
.shp => .json

mapshaper
•
•

•

地図データの変換や単純化
.json => topojson

他、pe...
使ったサービス&ツール
•

可視化
•

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

•

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

•

queu...
可視化の手順
1. ラフに全体像を紙に書く
2. 残りの部分を可視化する
http://www.reddit.com/r/pics/comments/d3zhx/how_to_draw_an_owl/
Just kidding :)
1. 可視化したいデータを読み込んで
配列にし、要素に結びつける
例) アスリートのオブジェクトの

selection
.data(array)
.enter()

配列をcircle要素に結びつける

The Grammar of
Grap...
2. スケール (scale) を設定する

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

{datum}
d3.scale.domain()!
メソッドに対応

scale

特徴
d3.scale.range()!
メ...
3. 座標系の設定を設定して画面に映す
•

svg要素は、それぞれ座標系を持っているためデータをscaleで写した
特徴に座標系を与える必要がある

•

この座標系が、ブラウザでの位置に対応する
The Grammar of Graphic...
コツ
レイヤー化
•

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

•

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

軸のレイヤー axesLayer

•

ラベルのレイヤー labelsLayer...
d3.jsでのレイヤー化の利点
•

要素が混ざらないので操作対象を選択しやすい
•

•

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

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

•

svgに直接要素を描画していくと、望んで...
レイヤー化されてる様子

クラス名 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で色...
参考資料
オススメ!

•

julia http://julialang.org/

•

jq http://stedolan.github.io/jq/

•

pandas http://pandas.pydata.org/

•

G...
実践! D3.jsで可視化入門
実践! D3.jsで可視化入門
実践! D3.jsで可視化入門
Prochain SlideShare
Chargement dans…5
×

21

Partager

Télécharger pour lire hors ligne

実践! D3.jsで可視化入門

Télécharger pour lire hors ligne

データ可視化 勉強会 発表資料
http://www.zusaar.com/event/3927003

デモ資料 https://github.com/bicycle1885/sochi-visualization

実践! D3.jsで可視化入門

  1. 1. 実践! D3.jsで可視化入門 データ可視化 勉強会 佐藤 建太 (@bicycle1885)
  2. 2. 自己紹介 • 佐藤 建太 • Twitter: @bicycle1885 • 東京大学 農学部 • バイオインフォマティクスが専門 • Julia langがマイブーム
  3. 3. 経緯
  4. 4. その後、
  5. 5. ということで、 可視化をしました。
  6. 6. 可視化って色々できる コミットログ タンパク質 遺伝的変異と病気の関係 交響曲
  7. 7. 今回は、
  8. 8. The Sochi 2014 Winter Olympics
  9. 9. Demo
  10. 10. ツールとサービス
  11. 11. 使ったサービス&ツール • データ集め • kimono • • ソチ五輪のデータAPIを提供している • • ウェブサイトをAPI化してくれるサービス これがないと死んでいた Phoca Flag Icons • • 国旗の画像をPublic Domainで提供 Natural Earth • 地図データ • 国名・都市名などのアノテーション付き
  12. 12. 使ったサービス&ツール • 前処理 • jq • • • JSONの前処理用コマンドラインツール kimonoのレスポンスがJSON形式だったので、jqを使っ て都合のいいように加工 pandas • Pythonのデータ分析等ができるライブラリ • RDBのような表形式のデータの読み書き・選択・結合に 便利 • 国のIDの対応をつけたりなど、名寄せ的な作業に使用 • IPythonからインタラクティブに使える
  13. 13. 使ったサービス&ツール • 前処理 • GDAL • • • 地図データのフォーマット変換ツール .shp => .json mapshaper • • • 地図データの変換や単純化 .json => topojson 他、perlのスクリプトやワンライナーなど
  14. 14. 使ったサービス&ツール • 可視化 • d3.js • Mike Bostock氏謹製の可視化ライブラリ • topojson • Mike Bostock氏謹製のtopojson形式の変換ツールで あり読み込みツール • queue • Mike Bostock氏謹製の非同期処理ライブラリ • 複数ファイルを非同期に読み込んで、1つのコール バック関数で受ける事ができる
  15. 15. 可視化の手順
  16. 16. 1. ラフに全体像を紙に書く
  17. 17. 2. 残りの部分を可視化する
  18. 18. http://www.reddit.com/r/pics/comments/d3zhx/how_to_draw_an_owl/
  19. 19. Just kidding :)
  20. 20. 1. 可視化したいデータを読み込んで 配列にし、要素に結びつける 例) アスリートのオブジェクトの selection .data(array) .enter() 配列をcircle要素に結びつける The Grammar of Graphicsでは geomに対応 {athlete1} {athlete2} circle2 {athlete2} circle3 {athleteN} JSON CSV XML circle1 circleN 配列 SVGの要素 地図データのような複雑なデータも! 国ごとの配列にしてpathに結びつける事ができる
  21. 21. 2. スケール (scale) を設定する 一つひとつのデータについて、 scaleを使ってマッピングをする {datum} d3.scale.domain()! メソッドに対応 scale 特徴 d3.scale.range()! メソッドに対応 例) 一人のアスリートを、scaleAgeで年齢に対応づける The Grammar of Graphicsでもscaleという概念がある
  22. 22. 3. 座標系の設定を設定して画面に映す • svg要素は、それぞれ座標系を持っているためデータをscaleで写した 特徴に座標系を与える必要がある • この座標系が、ブラウザでの位置に対応する The Grammar of Graphicsではcoordに対応 • transform属性で座標系を変換できる x scale RGBやHSLなどの! 色の座標系をとることもある y
  23. 23. コツ
  24. 24. レイヤー化 • The Grammar of Graphicsにならってレイヤー化 • javascriptの変数名もレイヤーに対応させるといいかも • 軸のレイヤー axesLayer • ラベルのレイヤー labelsLayer • 地図のレイヤー mapLayer • アスリートのレイヤー athletesLayer
  25. 25. d3.jsでのレイヤー化の利点 • 要素が混ざらないので操作対象を選択しやすい • • 軸レイヤーと同じtickクラスを別のレイヤーで使っても大丈夫 要素の上下関係が分かりやすい • • • svgに直接要素を描画していくと、望んでない要素が手前に来たりする 最初に必要なレイヤーをすべて作り、その上に要素を載せていくことで表示 の上下関係がコントロールしやすい 座標系の分離ができる • • g要素でレイヤーをつくることで、それぞれのレイヤーで座標系が分離できる レイヤー毎にCSSの名前を分けられる • Sass/Lessとかとも相性が良い
  26. 26. レイヤー化されてる様子 クラス名 background, map, country-name, labels, athletes, axes がそれぞれレイヤー
  27. 27. 色の選択 ColorHexa HSL Color Picker 色の組み合わせを選べる 色の微調整ができる
  28. 28. GET /complicated_question.html HTTP/1.1 Host: @bicycle1885 HTTP/1.1 301 Moved Permanently Location: @muddydixon
  29. 29. まとめ • 配列の要素をSVGの要素へ結びつける • scaleを設定して個々のデータから特徴空間へ写す • 特徴空間の点をブラウザ上の座標系へ写す • レイヤー化するとjavascriptもCSSも見通しよい • RGBで色の調節は厳しいが、HSLならやりやすい
  30. 30. 参考資料 オススメ! • 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/ オススメ! オススメ! オススメ!
  • ssuser89e1551

    May. 28, 2018
  • majinj

    Jul. 7, 2016
  • t-idf

    Nov. 13, 2015
  • yosukenakayama1

    Jul. 6, 2015
  • yin_mingchen

    Jun. 11, 2015
  • office_tennis

    Jun. 8, 2015
  • tomohiko_ariki

    Mar. 3, 2015
  • chikayukihayashi

    Feb. 19, 2015
  • junichiwatanuki

    Nov. 17, 2014
  • TetsuyaSasaki

    Oct. 17, 2014
  • jackchomimen

    Oct. 16, 2014
  • nobuyukijincho

    Oct. 15, 2014
  • okapee

    Sep. 11, 2014
  • chidoriashi1990

    Jul. 30, 2014
  • shiyamaz

    Jul. 24, 2014
  • nobuse

    Jul. 17, 2014
  • YoshinoriKoba

    Jul. 9, 2014
  • hideaki_honda

    May. 20, 2014
  • YusukeMasuda

    May. 20, 2014
  • tysayzmukai

    May. 14, 2014

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

Vues

Nombre de vues

6 320

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

208

Actions

Téléchargements

51

Partages

0

Commentaires

0

Mentions J'aime

21

×