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

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

2,330

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
2,330
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
33
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

Transcript of "ワークショップ「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)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×