• Like
実践! D3.jsで可視化入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 1,849 views
Published

データ可視化 勉強会 発表資料 …

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,849
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
25
Comments
0
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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