Downloaded 45 times
Uploaded byYuichi Yazaki
ワークショップ「D3.js」入門
2014年5月14日に、東京大学CSIS寄付部門 定例会議ワークショップ「D3.js」入門と題して開催したワークショップで使用したスライドです。位置情報（地図）の事例に重きを置いた内容となっています。
![[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について](https://cdn.slidesharecdn.com/ss_thumbnails/cfjasahishinbunhackathon20140302-140422030439-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際](https://cdn.slidesharecdn.com/ss_thumbnails/html5jrev02-140422025033-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
ワークショップ「D3.js」入門
- 1.
- 2.
- 3.
- 4.
- 5. D3.jsの主な特徴や機能 選択、アニメーション、タイマー、補間、配列操作、ランダム、外 部リソースの読み込み、テキスト／CSV整形、カラーユーティリ ティ、スケール、タイマー、レイアウト(Layout)、地理 (Geography)、地図投影法(Map Projection)、幾何(Geometry) • 統計学上必要な計算を賄ってくれる •地図投影法が多数用意されている • 細かいスタイリングがすべて指定できる • ウェブ標準に則っている
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. 地図の描画メソッド別 事例紹介 •Dot DistributionMaps! •Graduated Symbol Maps! •Choropleth Maps! •Isopleth maps! •Flow map! •Dorling Cartograms Map! •Contiguous Cartogram Map! •multi-projections! •Others
- 14.
- 15. Locals and Touristsby Eric Fischer https://www.flickr.com/photos/walkingsf/sets/72157624209158632/ Dot distribution maps 地図上に一定の大きさのエレメントをプロット
- 16. Locals and Touristsby Eric Fischer https://www.mapbox.com/labs/twitter-gnip/locals/ Dot distribution maps 地図上に一定の大きさのエレメントをプロット
- 17. Dencity by BenFry http://fathom.info/dencity Dot distribution maps 地図上に一定の大きさのエレメントをプロット
- 18.
- 19. The incredible riseof migrants' remittances http://visualizing.org/full-screen/54850 Graduated Symbol Maps 地図上に置くエレメントの大きさに変数をプロットする
- 20.
- 21. unemployment rates from2008 by Mike Bostock http://bl.ocks.org/mbostock/4060606 Chropleth Maps 地形の色で値を表現する
- 22.
- 23. Isometric and isoplethmaps ダミーテキストダミーテキストダミーテキスト Density map of homicides in Monterrey http://bl.ocks.org/diegovalle/5166482
- 24.
- 25. Flow map 地図とフローチャートのミックスで物の移動を表す DieWanderungsbewegungen zwischen den Kantonen im Jahr 2011 http://www.nzz.ch/aktuell/inland-sommerserie-schweizer-karten-interaktiv/binnenwanderung-in-der-schweiz-1.18128893
- 26.
- 27. Results - London2012 Olympics by The New York Times http://london2012.nytimes.com/results Dorling Cartograms マップ上の領域をできるだけシンプルに表現しようとした結果、地形そのものは消失
- 28.
- 29. Cartograms with d3& TopoJSON http://prag.ma/code/d3-cartogram/ Contiguous Cartogram 陸地の大きさや距離に値をプロット
- 30.
- 31.
- 32.
- 33. world airports voronoidiagram http://visualizing.org/visualizations/world-airports-voronoi-diagram Others その他まだ名前のついていないもの
- 34. Walmart locations allhexed up http://indiemaps.github.io/hexbin-js/tests/walmart.html Others その他まだ名前のついていないもの
- 35.
- 36.
- 38.
- 39.
- 40. Shape file →GeoJSON → TopoJSON ウェブ上では 使えない ウェブ上で 使える ウェブ上で 使えるし、より軽量
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. Webサーバを立てる（Macの場合） 簡易に起動できるので、Pythonのサーバを利用する cd /Users/Shared/Dropbox python -mSimpleHTTPServer 3000 cd ウェブサイトのルートにしたいディレクトリ python -m SimpleHTTPServer ポート番号
- 50. 日本地図…japan.json（TopoJSON） 地形とデータを繋ぐ nam (英語での都道府県名) nam_ja (日本語での都道府県名) どちらか 地形ファイルデータファイル objects.countries.id 地形ファイル world-50m.json データファイル 世界地図…world-50m.json（TopoJSON）