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

1. 矢崎 裕一
東京大学CSIS寄付部門
定例会議ワークショップ「D3.js」入門

2. あるEメール…

3. D3.js
Mike Bostock

4. Show Reel

5. D3.jsの主な特徴や機能
選択、アニメーション、タイマー、補間、配列操作、ランダム、外
部リソースの読み込み、テキスト／CSV整形、カラーユーティリ
ティ、スケール、タイマー、レイアウト(Layout)、地理
(Geography)、地図投影法(Map Projection)、幾何(Geometry)
• 統計学上必要な計算を賄ってくれる
• 地図投影法が多数用意されている
• 細かいスタイリングがすべて指定できる
• ウェブ標準に則っている

6. 地図投影法
(プラグインで増加できる分を含む)
https://github.com/mbostock/d3/wiki/Geo-Projections

7. 地図投影法
(プラグインで増加できる分)

8. 地図投影法
(プラグインで増加できる分)

9. 地図投影法
(プラグインで増加できる分)

10. 地図投影法
(プラグインで増加できる分)

11. 地図投影法
(プラグインで増加できる分)

12. Jason Davies
http://www.jasondavies.com/maps/

13. 地図の描画メソッド別 事例紹介
•Dot Distribution Maps!
•Graduated Symbol Maps!
•Choropleth Maps!
•Isopleth maps!
•Flow map!
•Dorling Cartograms Map!
•Contiguous Cartogram Map!
•multi-projections!
•Others

14. Dot Distribution Maps
地図上に一定の大きさのエレメントをプロット

15. Locals and Tourists by Eric Fischer
https://www.flickr.com/photos/walkingsf/sets/72157624209158632/
Dot distribution maps 地図上に一定の大きさのエレメントをプロット

16. Locals and Tourists by Eric Fischer
https://www.mapbox.com/labs/twitter-gnip/locals/
Dot distribution maps 地図上に一定の大きさのエレメントをプロット

17. Dencity by Ben Fry
http://fathom.info/dencity
Dot distribution maps 地図上に一定の大きさのエレメントをプロット

18. Graduated Symbol Maps
地形エリアには依存せずに、属性を大きさや色などで表現

19. The incredible rise of migrants' remittances
http://visualizing.org/full-screen/54850
Graduated Symbol Maps 地図上に置くエレメントの大きさに変数をプロットする

20. Choropleth Maps
地形の色で値を表現する
http://en.wikipedia.org/wiki/Choropleth_map

21. unemployment rates from 2008
by Mike Bostock
http://bl.ocks.org/mbostock/4060606
Chropleth Maps 地形の色で値を表現する

22. Isopleth Maps
地図上に数値を変化を示す／天気図などでおなじみ／
正確に描画するための大量のデータを必要とする
http://en.wikipedia.org/wiki/Contour_line

23. Isometric and isopleth maps ダミーテキストダミーテキストダミーテキスト
Density map of homicides in Monterrey
http://bl.ocks.org/diegovalle/5166482

24. Flow map
地図とフローチャートのミックスで物の移動を表す

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. Dorling Cartograms Map
マップ上の領域をできるだけシンプルに表現しようとした結果、地形そのものは消失
by Danny Dorling

27. Results - London 2012 Olympics
by The New York Times
http://london2012.nytimes.com/results
Dorling Cartograms マップ上の領域をできるだけシンプルに表現しようとした結果、地形そのものは消失

28. Contiguous Cartogram Map
陸地の大きさや距離に値をプロット

29. Cartograms with d3 & TopoJSON
http://prag.ma/code/d3-cartogram/
Contiguous Cartogram 陸地の大きさや距離に値をプロット

30. multi-projections
複数の投影法を活用

31. Earth Wind Map
http://visualizingurbanfutures.com/2013/12/21/world-wind-map/
multi-projections 複数の投影法を活用

32. others
その他まだ名前のついていないもの

33. world airports voronoi diagram
http://visualizing.org/visualizations/world-airports-voronoi-diagram
Others その他まだ名前のついていないもの

34. Walmart locations all hexed up
http://indiemaps.github.io/hexbin-js/tests/walmart.html
Others その他まだ名前のついていないもの

35. 自分をセンシングすることにより
描き出される地図
ウェアラブルデバイスで取得する自分のアクティビティ・データは
実は意外とオープンデータではない

36. アクティビティ・データ・サービスにおけるTwitter
Moves
https://apps.moves-app.com/

38. https://apps.moves-app.com/apps/MMapper/rckP_G3ULscJ9Xg0LNti8870Tj83aXVF/info?platform=all

39. 地形データ

40. Shape file → GeoJSON → TopoJSON
ウェブ上では
使えない
ウェブ上で
使える
ウェブ上で
使えるし、より軽量

41. 地理情報システム(GIS)間でのデータの相互運用におけるオープン標準として用いられるファイル形式
Shapefile

42. JSONを用いて空間データをエンコードし非空間属性を関連付けるファイル形式
他のGIS標準とは違い、ウェブ上のワーキンググループによりメンテナンスされている
GeoJSON
Feature一単位
これがFeatureCollection型のGeoJsonだということを示す
個々のジオメトリー
ジオメトリー以外のデータ
※緯度と経度の順で保存されている（慣習な順序とは逆）

43. GeoJsonに比べてファイルサイズをかなり削減(典型的なファイルであれば80%程度)できるMike B.による独自フォーマット
TopoJSON
https://github.com/mbostock/topojson/wiki/JP-Specification
このファイルが描くものの位置と拡縮サイズ
個々のジオメトリーの相対位置
これがTopoJsonだということを示す
個々のジオメトリー

44. 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/

45. 便利ツール
シンプル／軽量化ツール
http://bost.ocks.org/mike/simplify/
http://www.mapshaper.org/
緯度経度の確認ツール
http://teczno.com/squares/

46. データ可視化実践入門
http://gihyo.jp/book/2014/978-4-7741-6326-0
インタラクティブ・
データビジュアライゼーション
http://www.oreilly.co.jp/books/9784873116464/

47. 実習

48. https://github.com/n1n9-
jp/CSIS_map_140514
サンプル ソースコード

49. Webサーバを立てる（Macの場合）
簡易に起動できるので、Pythonのサーバを利用する
cd /Users/Shared/Dropbox
python -m SimpleHTTPServer 3000
cd ウェブサイトのルートにしたいディレクトリ
python -m SimpleHTTPServer ポート番号

50. 日本地図…japan.json（TopoJSON）
地形とデータを繋ぐ
nam (英語での都道府県名)
nam_ja (日本語での都道府県名)
どちらか
地形ファイル データファイル
objects.countries.id
地形ファイル
world-50m.json
データファイル
世界地図…world-50m.json（TopoJSON）