요소를 사용하여 히트 맵 생성?

Question

다음과 같은 브라우저 내 그래픽 렌더링 기능을 사용하여 히트 맵을 만들 수있는 JavaScript 라이브러리가 있습니까? <canvas> 또는 SVG?

HeatMapapi.com에 대해 알고 있지만 서버 측에서 열지도가 생성됩니다. 나는 그것을 시대에 생각합니다 <canvas> 우리는 더 이상 필요하지 않습니다!

아직 이와 같은 것이 없다면 그러한 도구를 만드는 데 참여할 자원 봉사자가 있습니까?

Answer 1

실시간 히트 맵을 포함한 데모를 만들었습니다. <canvas> 요소 및 JavaScript. 또한 히트 맵 샘플 옆에 문서화 된 코드를 추가했습니다. 히트 맵 생성 프로세스는 사용자 마우스 이동에 따라 캔버스 요소의 알파 맵을 기반으로합니다. 바로 여기에서 내 데모를 볼 수 있습니다.http://www.patrick-wied.at/static/heatmap/

Answer 2

Google Visualization API의 도움으로 히트 맵을 만들었습니다.http://code.google.com/apis/visualization/documentation/. SVG & VML을 사용하고 크로스 브라우저 호환도도 있습니다. 도움이되기를 바랍니다.

Answer 3

JS/Canvas/Web Worker 코드가 있습니다. 여기 그것으로 수행 할 수있는 많은 작업이 있지만. 또한 온라인으로 밀려납니다 http://heatmapthing.heroku.com/. 브라우저는 웹 작업자를 지원해야합니다.

개선 된 경우 풀 요청을 보내주십시오. 의사-가우시안 스무딩은 지금 지옥처럼 슬루 루.

Answer 4

나는 또한 시도해 보았지만 가우스가 내 자신을 부드럽게하지 않고 캔버스가 나를 위해 그렇게하도록했다. 기본적으로 나는 모든 지점에 대한 방사형 구배를 그레이 스케일로 그린 다음이 회색 스케일 이미지를 채색합니다 ( ".NET 2.0 (c#)으로 열 맵 생성" 자세한 설명을 위해서는 내 구현이 약간 다릅니다).

결과는 다음과 같습니다.

렌더링 시간은 크롬/크롬에서 그렇게 나쁘지 않습니다. 나는 가장 많은 시간이 많이 걸리는 부분은 모든 픽셀을 반복하고 있기 때문에 채색이라고 생각합니다.

여기에서 코드를 찾을 수 있습니다. http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

Answer 5

나는 몇 년 전에 Heatmap을 가지고 놀았습니다. 보다 http://www.urbigene.com/treemapphp/, 알고리즘은 여기에서 나왔습니다. http://www.cs.umd.edu/hcil/treemap-history/

Answer 6

Heatcanvas는 꽤 좋아 보입니다. 또한 OpenStreetMaps 위에서 실행할 리플렛 확장 기능이 있습니다.https://github.com/sunng87/heatcanvas

몇 점 (<200) 정도에서 상당히 잘 작동하지만 수천 포인트에서는 약간 느립니다. PAN과 ZOOM 후에 필요한 것보다 더 자주 재 계산할 수 있다고 생각하며, 즉, 히트 맵을 즉석에서 바꾸는 데 문제가 있었으며 (JavaScript를 사용하여 다른 히트 맵을 대체), 조금 더 실험하거나 연락해야한다고 생각합니다. 작가