web-dev-qa-db-ja.com

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

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

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

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

javascripthtmlcanvasheatmap
26
warpech

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

40
Patrick Wied

Google Visualization API [ http://code.google.com/apis/visualization/documentation/] を使用してヒットマップを作成しました。 SVGとVMLを使用し、クロスブラウザ互換でもあります。お役に立てば幸いです。

4
Rifat

私も試してみましたが、ガウスで自分を滑らかにすることなく、canvasにそれを任せました。基本的に、グレースケールのすべてのポイントに放射状のグラデーションを描画し、このグレースケール画像に色を付けます（詳細な説明については、 "Creating Heat Maps with .NET 2.0（C＃）" を参照してください。 ）。

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

Heat Map with JavaScript and Canvas

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

コードはここにあります： http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

2
tsauerwein

私はいくつかのjs/canvas/webワーカーコードを持っています ここ それでできる仕事はたくさんありますが。また、 http://heatmapthing.heroku.com/ でオンラインでプッシュされます。お使いのブラウザは、このためにWebワーカーをサポートする必要があります。

改善した場合はプルリクエストを送信してください。疑似ガウス平滑化は、今のところ地獄のようにslooooooooowです。

2
x1a4

数年前にヒートマップで遊んだ。 http://www.urbigene.com/treemapphp/ を参照してください。アルゴリズムはここから来ました： http://www.cs.umd.edu/hcil/treemap-history/

1
Pierre

Heatcanvasはかなり良さそうです。また、openstreetmapsの上で実行するためのリーフレット拡張機能もあります https://github.com/sunng87/heatcanvas

数ポイント（<200）程度で非常にうまく動作しますが、数千ポイントでは少し遅くなります。パンとズームの後で必要以上に頻繁に再計算される可能性があると思います。ヒートマップをその場で変更する（javascriptを使用してヒートマップを別のヒートマップに置き換える）のに問題がありました。もう少し実験する必要があると思います。または、著者

0
Paulus