work.log

エンジニアの備忘録的ブログ

ヒートマップを実装できる javascript ライブラリ

投稿:2012-06-15 16:31  更新:

ヒートマップ を簡単に実装できる jQuery プラグインを発見したのでそのメモ書きです。

何かに利用しようと思った訳ではないですがたまたま見つけて感動したのでとりあえず書いておきます。

プラグインは heatmapjs とそのままの名前ですが、公式サイト より必要なファイルをダウンロードし heatmap.js を読みこめばすぐに利用できます。

demo も同梱されていますが、そこから必要な部分を抜粋したコードが下記になります。

※ 見つけて試しただけですので詳しい解説は無しです。

heatmap.html

<html>
<head>
    <title>heatmap.js test</title>
    <script type="text/javascript" src="js/heatmap.js"></script>
    <script type="text/javascript" src="js/heatmap_demo.js"></script>
    <style>
        #heatmapArea {
            position:relative;
            float:left;
            width:500px;
            height:300px;
            border:1px dashed black;
        }
    </style>
</head>

<body>
    <div id="heatmapArea"></div>
</body>

</html>

heatmap_demo.js

window.onload = function(){

    var xx = h337.create({"element":document.getElementById("heatmapArea"), "radius":25, "visible":true});

    (function(){

        var active = false,
        lastCoords = [],
        mouseMove = false,
        mouseOver = false,

        activate = function(){
            active = true;
        },

        $ = function(id){
            return document.getElementById(id);
        },

        timer = null,
        simulateEv = function(){
            xx.store.addDataPoint(lastCoords[0], lastCoords[1]);
        },

        antiIdle = function(){
            if(mouseOver && !mouseMove && lastCoords && !timer){
                timer = setInterval(simulateEv, 1000);            
        }
    };

    (function(fn){
        setInterval(fn, 1000);
    }(antiIdle));

    var tmp = $("heatmapArea");

    tmp.onmouseout = function(){
        mouseOver = false;

        if(timer){
            clearInterval(timer)
            timer = null;
        }
    };

    tmp.onmousemove = tmp.onclick = function(ev){

        mouseMove = true;
        mouseOver = true;

        if(active){

            if(timer){
                clearInterval(timer);
                timer = null;
            }

            var pos = h337.util.mousePosition(ev);
            xx.store.addDataPoint(pos[0], pos[1]);
            lastCoords = [pos[0], pos[1]];
            active = false;

        }

        mouseMove = false;

    };

    tmp["ontouchmove"] = function(ev){  

        var touch = ev.touches[0],  

         // simulating a mousemove event           
         simulatedEvent = document.createEvent("MouseEvent");  
         simulatedEvent.initMouseEvent("mousemove", true, true, window, 1,  
         touch.screenX, touch.screenY,  
         touch.clientX, touch.clientY, false,  
         false, false, false, 0, null);  

         // dispatching the simulated event              
         ouch.target.dispatchEvent(simulatedEvent);  

         // we don't want to have the default iphone scrolling behaviour ontouchmove  
         ev.preventDefault();  

    };

    (function(fn){

        setInterval(fn, 50);
        }(activate));

    })();

};

スポンサーリンク

heatmap.js Demo

下記の枠内にヒートマップを実装してみました。

heatmap

マウス軌跡、クリックのイベントで色が変わります。凄い!!

スポンサーリンク

コメント

コメントを残す

よく読まれている記事

  • 今日
  • 週間
  • 月間