Created by Masayuki Shimizu / @_shimizu
D3は様々な投影法に対応
D3を使って地図を表示するまでの流れ
//geojsonの読み込み
d3.json("city.geojson", (geojosn) => {
//プロジェクションの設定
const projection = d3.geoMercator()
.fitExtent([[0, 0], [widht, height]], geojson)
//パスジェネレーターを生成する
const geoPaht = d3.geoPath().projection(projection)
//path要素にデータを束縛する
const path = svg.selectAll("path").data(geojson.features)
//path要素が足りなければ追加する
const appendPath = path.enter().append("path")
//path要素が多すぎるなら削除する
const removePath = path.exit().remove()
//アトリビュートを更新して地図を描画する
const maps = path.merge(appendPath).attr("d", d => geoPaht(d))
})
//人口が2万人以上・以下で塗り分ける
maps.attr("fill", d => (d.properties.pop > 20000) ? "green" : "blue" )
//群馬県に所属する市区町村だけ赤く塗る
maps.filter(d => d.properties.pref === "群馬県").attr("fill", "red")
GeoJSONで読み込んだ世界地図を描画
地球儀として描画
複数の地図を描画
散布図と地図の連動
SVGのフィルター機能等を使ってデザイン
都道府県境界データ(ポリゴン)を表示
Google Maps API ![]() |
OpenLayers ![]() |
Leaflet.js ![]() |
Google Map上にD3で作成したボロノイ図を表示