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