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

3,707 views
3,526 views

Published on

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

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

0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,707
On SlideShare
0
From Embeds
0
Number of Embeds
75
Actions
Shares
0
Downloads
39
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

実践! 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/ オススメ! オススメ! オススメ!

×