LoginSignup
30
30

More than 5 years have passed since last update.

D3.js で地図を描くときに世話になっ(ている|た)もの

Last updated at Posted at 2016-05-30

D3.js で地図を描こうと思った時に見る Web Resource まとめ.

D3.js 公式

もちろん,最初は公式ドキュメントを読まなきゃダメっすね.
D3.js と聞くと「グラフを描画するライブラリ」と思いがちだが,"Data Driven Documents" というだけあり,コアというか入り口は配列 / オブジェクトデータを整形する API であり,そのメソッドチェーンの出口が変数への吐き出しなのかグラフの描画なのかが違うんだな,というのがわかったので非常に良いチュートリアルだった.

SVG Tutorial

恥ずかしながら仕事で D3.js を触るまで svg は名前と効用だけ知ってて書いたことも無ければ API も知らなかったので,まずはしっかりと SVG のチュートリアルを読んだ.d3.pie だの d3.geo が吐き出す path の意味が何となく分かるだけでちょっと不安が取り払える.

D3.jsとTopoJSONで地図を作る

海外のチュートリアルの翻訳記事.これ読めば一連の流れは分かる.

Qiita の記事たち

先人の皆様に感謝.

データ元ネタ

すいません,仕事で世界地図しか書いていないので国内の情報は拾えていません…

Natural Earth

まず間違いない.

Continents.json

単なる1枚ペラの Gist なんだけど,実は仕事で一番欲しかったやつ.(自作できるようになりたい…!!)
てか,GeoJSON を GitHub にアップするとプレビューしてくれるんだね!!!(驚愕)

johan/world.geo.json

世界地図のデータおよび国ごとのデータ.

mapshaper

GeoJSON や Shape ファイルの簡素化をしてくれる.複雑な地形を簡略化したり,小さな島を省略したりするのだけれど,スライダを動かしながら,どの程度簡略化されたかもわかるので非常にわかりやすい.

30
30
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
30