【D3.js】Google Map上にボロノイ図を描く
前の記事では、ガソリンスタンドの位置情報を用いて高崎市の地図上にボロノイ図を表示しました。 今回は、同じデータを使ってGoogle Map上にボロノイ図を描き、パン／ズームにも対応してみました。 example D3.jsを使えば地図上にボロノイ図を書くのも比較的簡単に行えます。 医療機関データなどを使ってボロノイ図を描いてみても面白いかもしれません。 サンプルコード d3.json('gasStation.geojson', main); function main(pointjson) { //Google Map 初期化 const map = new google.maps.Map(document.getElementById('map'), { zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new goo
【D3.js】地図上にボロノイ図を描く
各黒い点(母点)がガソリンスタンドの位置です。 国土数値情報 燃料給油所データ(点)を使って、高崎市の地図上にボロノイ図を書いてみました。 example 【参考】 ボロノイ図とは サンプルコード const width = 980; const height = 500; const svg = d3.select("svg"); const mapLayer = svg.append("g"); const voronoiLayer = svg.append("g"); const projection = d3.geoMercator(); const path = d3.geoPath(); const q = d3.queue(); q .defer(d3.json, "takasaki.topojson") .defer(d3.json, "gasStation.geojson
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
