d3.js v4 でポリゴンとポイントとボロノイ図を表示する
d3.js で検索すると v3 で書かれたものがほとんどでな上バージョンも明記されていないことも多くて探しにくい…。
結局 GUNMA GIS GEEK の清水さんのコードだけ見ててできたので d3.js + 地図を表現する時にはまず清水さんのブログを探してからにしよう…。
つーか d3.js v5 があるじゃんよ。
何か目的があって書きたかったわけではないですが、オフィシャルな(?)ドキュメントを読む前に少しは書いておかないとドキュメントが何言ってるかわらからないヤツなんです。
青で段階的に着色されたポリゴンは e-Stat) からダウンロードした2015年の国勢調査時の町丁目を QGIS で GeoJSON 化したものです。ポリゴン内の人口が多いほど青が濃くなっていますが、面積が揃っていないので着色だけ見てもよくわからないことになってしまいました。
赤いポイントは 埼玉県オープンデータ からダウンロードした川越市の避難所データで、黒い境界は避難所データをボロノイ分割してできたポリゴンです。
d3.js を僅かに程度覚えてもデザイン力がないとツライことに気づきました…。
ポイントのレンダリングをポリゴンのレンダリングに似せて書いてスマートにしたいなとか思っていますが、とりあえずこんな感じで。
