D3.js + Google Map API でヒートマップ表示

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上にヒートマップを描画します。
（コードの説明はソースのコメントを参照してください）

デモを表示する

会社主催で機械学習の勉強会を開催しました。

昨日（08/06）、会社主催の「PHP機械学習フォーラム」第一回セミナー＆LTセッションが行われました。

書籍やネットでは難解な数式が並ぶ機会学習のアルゴリズムについて平易に解説する内容で、来場者の方々からも好意的な感想を頂き、実りの多い会でした。

多くの参加者に恵まれました。

ベイジアンフィルタのアルゴリズムを平易に解説する内容でした。

前回の出版記念セミナーとは違い、参加者の多くが技術よりの方という印象で、セミナー後の懇親会でも「高額な自然言語処理システムを入れたけれど使いこなせなかった」「Pythonは気になるけれどこれで受注できるかというと難しい」など実際の利用シーンに近い話題やプログラム言語に関する情報を交換することができました。

Google Map Apiで地図にデータを配置する初歩的なメモ

1. はじめに

GoogleMapApiを用いたコードは何度か書いた事があるのですが、毎回細かい点を検索して調べなおしていたので簡単にまとめてメモします。

データのヒートマップ表示

ここで紹介するサンプルコードはAPIキーを含んでいません。これは非推奨の使い方なので実際に使用する場合はAPIキーを取得して使用したほうがよさそうです。GoogleMapAPIの仕様するにはGoogleの使用許諾に同意する必要があります。

2. まずは地図だけを表示する

ただ地図を表示するだけです。拡大率と中心緯度経度を指定しています。

【Google API読み込み時のURLオプションパラメーター】: sensor(必須): true/false (端末のGPSセンサーを使うか否か); language: ja (ラベルで使用する言語); libraries: visualization など(ヒートマップを重ねるなどの処理をする場合に指定**後述**)

デモを表示する

3. 続いて単純なピンを打つ

地図上に既定アイコンのピンを打ちます。ピンをクリックすると吹き出しを表示します。

（コードの説明はソースのコメントを参照してください）

デモを表示する

4. ピンのかわりにサークルを配置する

ピンだといかにもGoogleMapな雰囲気なので、カラーサークルをデータ位置に配置します。また、データ中の値を使用してサークルの大きさを変更して配置します。

デモを表示する

5. ピンのかわりにヒートマップを配置する

データが密集している場合などはサークルだと重なりが多くなって分かりづらくなってしまいます。こんな時はヒートマップを配置します。正確にはヒートマップ用のレイヤーを作成してGoogleMapへ重ねます。

デモを表示する