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

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

コメント

コメントを残す

おすすめのVPSサーバ

  • OSが選べる
  • VPS同士でLANが組める
  • 複数台構成向き

このブログで使っています。

  • 転送量が多いサービスに
  • 借りてるのは3年間一度もdown無し!

よく見られている記事

  • 本日
  • 週間
  • 月間