ワークショップ「D3.js」入門

3,460 views

Published on

2014年5月14日に、東京大学CSIS寄付部門 定例会議ワークショップ「D3.js」入門と題して開催したワークショップで使用したスライドです。位置情報(地図)の事例に重きを置いた内容となっています。

Published in: Design
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,460
On SlideShare
0
From Embeds
0
Number of Embeds
658
Actions
Shares
0
Downloads
37
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

ワークショップ「D3.js」入門

  1. 1. 矢崎 裕一 東京大学CSIS寄付部門 定例会議ワークショップ「D3.js」入門
  2. 2. あるEメール…
  3. 3. D3.js Mike Bostock
  4. 4. Show Reel
  5. 5. D3.jsの主な特徴や機能 選択、アニメーション、タイマー、補間、配列操作、ランダム、外 部リソースの読み込み、テキスト/CSV整形、カラーユーティリ ティ、スケール、タイマー、レイアウト(Layout)、地理 (Geography)、地図投影法(Map Projection)、幾何(Geometry) • 統計学上必要な計算を賄ってくれる • 地図投影法が多数用意されている • 細かいスタイリングがすべて指定できる • ウェブ標準に則っている
  6. 6. 地図投影法 (プラグインで増加できる分を含む) https://github.com/mbostock/d3/wiki/Geo-Projections
  7. 7. 地図投影法 (プラグインで増加できる分)
  8. 8. 地図投影法 (プラグインで増加できる分)
  9. 9. 地図投影法 (プラグインで増加できる分)
  10. 10. 地図投影法 (プラグインで増加できる分)
  11. 11. 地図投影法 (プラグインで増加できる分)
  12. 12. Jason Davies http://www.jasondavies.com/maps/
  13. 13. 地図の描画メソッド別 事例紹介 •Dot Distribution Maps! •Graduated Symbol Maps! •Choropleth Maps! •Isopleth maps! •Flow map! •Dorling Cartograms Map! •Contiguous Cartogram Map! •multi-projections! •Others
  14. 14. Dot Distribution Maps 地図上に一定の大きさのエレメントをプロット
  15. 15. Locals and Tourists by Eric Fischer https://www.flickr.com/photos/walkingsf/sets/72157624209158632/ Dot distribution maps 地図上に一定の大きさのエレメントをプロット
  16. 16. Locals and Tourists by Eric Fischer https://www.mapbox.com/labs/twitter-gnip/locals/ Dot distribution maps 地図上に一定の大きさのエレメントをプロット
  17. 17. Dencity by Ben Fry http://fathom.info/dencity Dot distribution maps 地図上に一定の大きさのエレメントをプロット
  18. 18. Graduated Symbol Maps 地形エリアには依存せずに、属性を大きさや色などで表現
  19. 19. The incredible rise of migrants' remittances http://visualizing.org/full-screen/54850 Graduated Symbol Maps 地図上に置くエレメントの大きさに変数をプロットする
  20. 20. Choropleth Maps 地形の色で値を表現する http://en.wikipedia.org/wiki/Choropleth_map
  21. 21. unemployment rates from 2008 by Mike Bostock http://bl.ocks.org/mbostock/4060606 Chropleth Maps 地形の色で値を表現する
  22. 22. Isopleth Maps 地図上に数値を変化を示す/天気図などでおなじみ/ 正確に描画するための大量のデータを必要とする http://en.wikipedia.org/wiki/Contour_line
  23. 23. Isometric and isopleth maps ダミーテキストダミーテキストダミーテキスト Density map of homicides in Monterrey http://bl.ocks.org/diegovalle/5166482
  24. 24. Flow map 地図とフローチャートのミックスで物の移動を表す
  25. 25. Flow map 地図とフローチャートのミックスで物の移動を表す Die Wanderungsbewegungen zwischen den Kantonen im Jahr 2011 http://www.nzz.ch/aktuell/inland-sommerserie-schweizer-karten-interaktiv/binnenwanderung-in-der-schweiz-1.18128893
  26. 26. Dorling Cartograms Map マップ上の領域をできるだけシンプルに表現しようとした結果、地形そのものは消失 by Danny Dorling
  27. 27. Results - London 2012 Olympics by The New York Times http://london2012.nytimes.com/results Dorling Cartograms マップ上の領域をできるだけシンプルに表現しようとした結果、地形そのものは消失
  28. 28. Contiguous Cartogram Map 陸地の大きさや距離に値をプロット
  29. 29. Cartograms with d3 & TopoJSON http://prag.ma/code/d3-cartogram/ Contiguous Cartogram 陸地の大きさや距離に値をプロット
  30. 30. multi-projections 複数の投影法を活用
  31. 31. Earth Wind Map http://visualizingurbanfutures.com/2013/12/21/world-wind-map/ multi-projections 複数の投影法を活用
  32. 32. others その他まだ名前のついていないもの
  33. 33. world airports voronoi diagram http://visualizing.org/visualizations/world-airports-voronoi-diagram Others その他まだ名前のついていないもの
  34. 34. Walmart locations all hexed up http://indiemaps.github.io/hexbin-js/tests/walmart.html Others その他まだ名前のついていないもの
  35. 35. 自分をセンシングすることにより 描き出される地図 ウェアラブルデバイスで取得する自分のアクティビティ・データは 実は意外とオープンデータではない
  36. 36. アクティビティ・データ・サービスにおけるTwitter Moves https://apps.moves-app.com/
  37. 37. https://apps.moves-app.com/apps/MMapper/rckP_G3ULscJ9Xg0LNti8870Tj83aXVF/info?platform=all
  38. 38. 地形データ
  39. 39. Shape file → GeoJSON → TopoJSON ウェブ上では 使えない ウェブ上で 使える ウェブ上で 使えるし、より軽量
  40. 40. 地理情報システム(GIS)間でのデータの相互運用におけるオープン標準として用いられるファイル形式 Shapefile
  41. 41. JSONを用いて空間データをエンコードし非空間属性を関連付けるファイル形式 他のGIS標準とは違い、ウェブ上のワーキンググループによりメンテナンスされている GeoJSON Feature一単位 これがFeatureCollection型のGeoJsonだということを示す 個々のジオメトリー ジオメトリー以外のデータ ※緯度と経度の順で保存されている(慣習な順序とは逆)
  42. 42. GeoJsonに比べてファイルサイズをかなり削減(典型的なファイルであれば80%程度)できるMike B.による独自フォーマット TopoJSON https://github.com/mbostock/topojson/wiki/JP-Specification このファイルが描くものの位置と拡縮サイズ 個々のジオメトリーの相対位置 これがTopoJsonだということを示す 個々のジオメトリー
  43. 43. JSONを用いて空間データをエンコードし非空間属性を関連付けるファイル形式 他のGIS標準とは違い、ウェブ上のワーキンググループによりメンテナンスされている Shapefile→GeoJSON→TopoJSON GDAL http://www.gdal.org/ TopoJSON https://www.npmjs.org/package/topojson Shapefile→GeoJSON GeoJSON→TopoJSON QGIS http://www.qgis.org/ja/site/
  44. 44. 便利ツール シンプル/軽量化ツール http://bost.ocks.org/mike/simplify/ http://www.mapshaper.org/ 緯度経度の確認ツール http://teczno.com/squares/
  45. 45. データ可視化実践入門 http://gihyo.jp/book/2014/978-4-7741-6326-0 インタラクティブ・ データビジュアライゼーション http://www.oreilly.co.jp/books/9784873116464/
  46. 46. 実習
  47. 47. https://github.com/n1n9- jp/CSIS_map_140514 サンプル ソースコード
  48. 48. Webサーバを立てる(Macの場合) 簡易に起動できるので、Pythonのサーバを利用する cd /Users/Shared/Dropbox python -m SimpleHTTPServer 3000 cd ウェブサイトのルートにしたいディレクトリ python -m SimpleHTTPServer ポート番号
  49. 49. 日本地図…japan.json(TopoJSON) 地形とデータを繋ぐ nam (英語での都道府県名) nam_ja (日本語での都道府県名) どちらか 地形ファイル データファイル objects.countries.id 地形ファイル world-50m.json データファイル 世界地図…world-50m.json(TopoJSON)

×