<canvas> 要素を使用してヒートマップを作成しますか?

Question

次のようなブラウザ内グラフィック レンダリング機能を使用してヒートマップを作成できる JavaScript ライブラリはありますか? <canvas> それともSVG？

HeatMapAPI.com については知っていますが、ヒート マップはサーバー側で生成されます。の時代だと思います。 <canvas> 要素はもう必要ありません。

このようなツールがまだない場合、そのようなツールの作成に参加してくれるボランティアはいますか?

Answer 1

私は<canvas>要素とJavaScriptを使用して、リアルタイムのヒートマップなどのデモを作成しました。私はまた、ヒートマップのサンプルの隣に文書化されたコードを追加しました。ヒートマップ生成処理は、ユーザのマウスの動きに依存キャンバス要素にアルファマップに基づいています。 あなたは右ここに私のデモを見てみることができます。 http://www.patrick-wied.at/static/heatmap/する

Answer 2

私は、Googleの可視化APIの助けを借りて、ヒットマップを作成し、[ます。http：// code.google.com/apis/visualization/documentation/] の。これは、SVG＆VMLを使用し、また、クロスブラウザの互換性。それは助けいただければ幸いです。

Answer 3

私はいくつかのJS /キャンバス/ウェブワーカーのコードを持っているここをすることができ、作業の多くがありますけれどもこれで完了です。また、 http://heatmapthing.heroku.com/ をオンラインでプッシュされています。お使いのブラウザは、このためのWebワーカーをサポートする必要があります。

あなたはそれが改善される場合、プルリクエストを送信してください。擬似ガウス平滑化は今地獄のようslooooooooowです。

Answer 4

私も試してみましたが、ガウス スムージングを自分で実行せずに、canvas に任せました。基本的に、グレー スケールのすべての点に放射状のグラデーションを描画し、このグレー スケール イメージを色付けします (「 「.NET 2.0 (C#) を使用したヒート マップの作成」 詳細な説明のために、私の実装は少し異なります)。

結果は次のようになります。

Chrome/Chromium ではレンダリング時間はそれほど悪くありません。すべてのピクセルをループしているため、最も時間がかかるのは色付けだと思います。

コードはここで見つけることができます: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

Answer 5

私は数年前にヒートマップでプレイ。 http://www.urbigene.com/treemapphp/ を参照してください、このアルゴリズムは、ここから来ました：< href = "http://www.cs.umd.edu/hcil/treemap-history/" のrel = "nofollowをnoreferrer"> http://www.cs.umd.edu/hcil/treemap-history/

Answer 6

Heatcanvasはかなりよさそうです。また、オープンストリートマップの上で実行するためにリーフレット拡張子を持ちます https://github.com/sunng87/heatcanvasする

これは、いくつかのポイント（<200）またはその上で非常によく動作しますが、ポイントの何千のビット遅くなります。私はそれがまた、パンとズームの後に必要以上に頻繁に再計算かもしれないと思う、と私は（別の使用してJavaScriptを使用してヒートマップを置き換える）その場でヒートマップを変更するといくつかの問題を抱えていた、私はそれでより多くのビットを試す、または連絡する必要があると思います著者