1. はじめに
“JsonファイルのデータをD3.jsで読み込み、
GoogleMapにヒートマップとして配置する”
8/4の投稿(Google Map Apiで地図にデータを配置する初歩的なメモ)ではGoogleMapApiを用いてGoogleマップ上にピンやヒートマップを描画する方法をメモしました。今回はより実用的に、ヒートマップなどのデータをJsonファイルとして準備し、D3.jsで読込んで描画する処理をメモします。前回のコードと比較すると、最近各所で使われているD3.jsがデータのロードに限ればとてもシンプルに利用できることが分かると思います。
GoogleMapAPIを使用する際の制限などは前回同様。使用許諾を参照してください。
2. データ
次のデータを「heatdata.json」という名前でスクリプトと同じフォルダに配置します。前回スクリプト内で使用したJsonコードはエラーが出たため、変数名などをダブルクォーテーションで囲むなど修正しています。
ファイルを直接開く3. 実際のコード
上記JsonデータをD3.jsを使用して読み込み、GoogleMap上にヒートマップを描画します。
（コードの説明はソースのコメントを参照してください）
0 件のコメント:
コメントを投稿