Tuesday 14 May 2013

Create Web Heatmaps using Javascript Heatmaps Library

Today, i came across an open source javascript library called 'HeatMaps', which is used to generate realtime heatmaps. It uses the power and flexibility of the HTML5 canvas element to creating heatmaps based on your data (gradient, change the opacity, datapoint radius and so on).

As per the Documentation,

"A heatmap is a visualization used for visualizing three dimensional data. Two dimensions represent cartesian coordinates (x and y values) and the third dimension is used for showing the intensity of a datapoint in relative comparison to the absolute maximum of the dataset. The intensity is shown as a color, usually red (hot) is used for the maxima and blue (cold) for minima."

Implementation

1) First, you need to download  heatmap.js file from here
2) Include the download heatmap.js file into your HTML Web Page.
3) heatmap.js will create one global object called heatmapFactory (otherwise known as h337). This Global object has create() function which will accept one argument as config (Object) and returns a heatmap instance.
4) The Configuration object you can specify the below properties in order to customize your heatmap instance.
  • radius (optional) Number. That's the radius of a single datapoint in the heatmap** (measured in pixels). Default is 40
  • element (required) String|HTMLelement. Either provide an element's id or the element itself which should contain the heatmap.
  • visible (optional) Boolean. Whether the heatmap is visible or not. Default is true
  • gradient (optional) Object. An object which contains colorstops from 0 to 1. Default is the standard heatmap gradient.
  • opacity (optional) Number [0-100]. Opacity of the heatmap measured in percent.
After creating the heatmap object you can set the data using setDataSet(). It also allows to set single datapoint using addDataPoint().

Here is the Sample Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Heatmap Demo</title>
</head>
<body>
<div id="heatmapArea" style="height:700px;"></div>
<script type="text/javascript" src="heatmap.js"></script>
<script type="text/javascript">
window.onload = function(){

    // heatmap configuration
    var config = {
        element: document.getElementById("heatmapArea"),
        radius: 30,
        opacity: 40
    };
    //creates and initializes the heatmap
    var heatmap = h337.create(config);
     var data = {
        max: 50,
        data: [
            { x: 110, y: 20, count: 28 },
            { x: 125, y: 125, count: 74 },
            { x: 250, y: 230, count: 60 },
           { x: 370, y: 250, count: 50 },
           { x: 490, y: 270, count: 60 },
           { x: 500, y: 330, count: 90 }
        ]
    };

    heatmap.store.setDataSet(data);
}
</script>
</body>
</html>

Here is the output for the above code,

For more detailed information, please visit the documentation here and various examples can be found here.

Hope, you enjoyed this Post.

2 comments:

  1. Good information. In fact, I didn't have any idea about heat maps and the important help it provides. Thanks to you for writing and explaining in such a simple way, I have understood a lot about this useful tool.

    ReplyDelete
    Replies
    1. Thanks for your appreciation and kind words. it really encourages me to write more useful articles

      Delete

Related Posts Plugin for WordPress, Blogger...