gwt - GWTのヒートマップ（密度マップ）

Question

画像にヒートマップ（密度マップ）を作成したい。http://www.heatmapapi.com/Sample_Google.aspxにあるような例は、私がやろうとしていることの良い例です。

これを達成するためのGWTの方法はありますか？または、提案できる優れた（flashまたはjs）ソリューション（Webアプリ用のヒートマップツールについて言及したもの以外）はありますか？

Answer 1

大学の最終学年のプロジェクトでも同様のことを実行しました。HeatMap APIと同じアプローチを使用して、再配置時に生成された画像をマップにオーバーレイしました。

ヒートマップのように見える半透明のPNG画像を生成するために、クエリ文字列のバウンディングボックス座標を受け入れるカスタムJava Webサーバーを作成しましたが、それは決して適切な統計的に正しいアルゴリズムではありませんでした。当時、ヒートマップを作成するためのアルゴリズムを見つけることができませんでした。オンラインまたはジャーナルで見つかったアルゴリズムの多くは、実際には密度ヒートマップではなくクラスターヒートマップ/ツリーマップ用でした。

各座標を値にマップする関数を使用して、データの2D配列を生成しました。配列に追加すると値が増加するため、配列を0〜255の値に正規化する必要がありました。これにより、簡単に色を付けてキャンバスに出力できます。このためのソースコードが見つからないのではないかと思います。アルゴリズムは非常に近似的でした。

1年ほど前、BNP（人種差別的な英国の政党）のメンバーリストがリークされたとき、各ピンポイントにPNGヒートスポットを配置する別の（より単純ですが、おそらくさらに精度が低い）ソリューションに出くわしました。ヒートマップ。元の地図は見つかりませんが、ここにこのスクリーンショットがありますhttp://www.labourlist.org/revealed_the_bnps_social_media_strategy_mark_hanson

Answer 2

私の知る限り、ヒートマップを実行するように設計されたGWTには、少なくとも公式のSDKには何もありません。最も手っ取り早いのは、既存のJSソリューションをネイティブ関数として統合し、現在のGWTコードから使用することです。

Answer 3

基本的に2つの方法があります。1つは「ハッキー」であり、GWT内から直接行う方法はあまりエレガントではなく、もう1つはGoogleVisualizationAPIを利用します。

ハッキーな方法では、テーブルを作成してデータをテーブルに配置します。さらに、データ値を範囲に「ビン化」する方法を決定してから、ビンに色を割り当てる必要があります（CSSファイルで指定します）。続いて、列/行フォーマッターを使用して、適切なCSSをテーブルセルにアタッチします。私は実際にGWT内でこのようにヒートマップを実行しましたが、それは機能します。

ハッキーではない方法は、Google Visualisations APIにアクセスし、JSNIを使用してGWTにすでに存在するヒートマップをラップすることです。