【D3.js】Google Map上に円グラフを表示する

最終更新日

google map上に円グラフを表示する

example

以前,前橋のオープンデータを使ってシンボルマップを作成しましたが、同じ「町丁ごとの年齢別人口構成推移」データを使って、男女比を表す円グラフを地図上に表示してみました。

サンプル

コードが結構長くなったので、Google Maps APIのdrawメソッド内だけ参考に載せます。

D3.jsを使てGoogle Map上にSVGを表示する方法は以下を参照してください。
【D3.js】Google MapにSVGをオーバーレイする(SHAPEデータ軽量化)