<canvas>
や SVGなどのブラウザー内グラフィック レンダリング機能を使用してヒートマップを作成できる JavaScript ライブラリはありますか?
HeatMapAPI.com については知っていますが、ヒート マップはサーバー側で生成されます。エレメントの時代には<canvas>
もう必要ないと思います!
このようなツールがまだない場合、そのようなツールの作成に参加するボランティアはいますか?
<canvas>
や SVGなどのブラウザー内グラフィック レンダリング機能を使用してヒートマップを作成できる JavaScript ライブラリはありますか?
HeatMapAPI.com については知っていますが、ヒート マップはサーバー側で生成されます。エレメントの時代には<canvas>
もう必要ないと思います!
このようなツールがまだない場合、そのようなツールの作成に参加するボランティアはいますか?
<canvas>
要素と JavaScriptを使用したリアルタイム ヒートマップを含むデモを作成しました。また、ヒートマップ サンプルの横に文書化されたコードを追加しました。ヒートマップ生成プロセスは、ユーザーのマウスの動きに依存するキャンバス要素のアルファ マップに基づいています。ここで私のデモを見ることができます:
http://www.patrick-wied.at/static/heatmap/
Google Visualization API [ http://code.google.com/apis/visualization/documentation/]を使用してヒット マップを作成しました。SVG と VML を使用し、クロス ブラウザとの互換性もあります。それが役立つことを願っています。
私も試してみましたが、ガウス平滑化を行わずに、キャンバスに任せました。基本的に、グレー スケールのすべてのポイントに放射状グラデーションを描画し、このグレー スケール イメージに色を付けます (詳細な説明については、「.NET 2.0 (C#) を使用したヒート マップの作成」を参照してください。私の実装は少し異なります)。
結果は次のようになります。
(ソース: bitbucket.org )
Chrome/Chromium でのレンダリング時間はそれほど悪くありません。すべてのピクセルをループしているため、最も時間がかかるのは色付けだと思います。
ここでコードを見つけることができます: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
ここにはいくつかの js/canvas/web ワーカー コードがありますが、それを使用して実行できる作業はたくさんあります。また、http://heatmapthing.heroku.com/でオンラインにプッシュされています。これには、ブラウザが Web ワーカーをサポートしている必要があります。
改善する場合はプルリクエストを送ってください。疑似ガウス平滑化は、今のところ地獄のように遅いです。
数年前にヒートマップで遊んだ。http://www.urbigene.com/treemapphp/を参照してください。アルゴリズムはここから来ました: http://www.cs.umd.edu/hcil/treemap-history/
Heatcanvas はかなり良さそうです。また、openstreetmaps https://github.com/sunng87/heatcanvasの上で実行するためのリーフレット拡張機能もあり ます。
少数のポイント (< 200) 程度では問題なく動作しますが、何千ものポイントでは少し遅くなります。また、パンとズームの後に必要以上に頻繁に再計算される可能性があると思います。また、その場でヒートマップを変更する (javascript を使用してヒートマップを別のヒートマップに置き換える) ことに問題がありました。もう少し実験する必要があると思います。または、著者