Post
Ask Question

Heatmaps Using JavaScript: Part One

Introduction

 
You might have seen heat maps overlaid on Google Maps or World Map to show traffic density, population density, or web traffic occurring at a site on the map. Heatmap is the way in which data is visualized to interpret data density within a context. 
 

Heatmaps

 
Typically, heat maps show greater color shade or a color density with an increase in data. In the above example of traffic density and others the map is considered as a base and data is overlaid on it and visualization is created.
 

Cal-HeatMap

 
In our example, we will be using a calendar view as a base and our data will be overlaid on it. At first sight, this looks complicated, but this has been made simpler with the combination of D3.js and Cal-HeatMap.js.
 
Still not sure how this looks? Here are some examples for you and then we will actually build one of them.
 
heatmap
 
So Cal-HeatMap is a JavaScript module to create calendar heatmaps and can be located using CDN path.
 
Business Use Case – Showing call volume of a service center
 
Let's consider a scenario where we need to display the call volume of a service center. Some years before, we developers used to display various reports as daily, weekly, monthly, or show some charts for call volume. But this kind of data visualization makes a difference and helps for better decision making.
 
Now let's follow the below steps for our business case.
  1. Create index.html and copy paste below code,
    1. <!DOCTYPE html>    
    2. <html lang="en">    
    3.     
    4. <head>    
    5.     <title>Cal-Heatmap Samples</title>    
    6.     <meta charset="utf-8">    
    7.     <meta name="viewport" content="width=device-width, initial-scale=1">    
    8.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    
    9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
    10.     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
    11.     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>    
    12.     <script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>    
    13.     <link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />    
    14. </head>    
    15.     
    16. <body>    
    17.     <div class="container">    
    18.         <div class="page-header">    
    19.             <h2>    
    20. Cal-HeatMap Samples</h2>    
    21.         </div>    
    22.         <div class="row">    
    23.             <div class="col-lg-6">    
    24.                 <div class="panel panel-default">    
    25.                     <div class="panel-heading"><span class="glyphicon glyphicon-equalizer"></span> Service Call Statistics</div>    
    26.                     <div class="panel-body">    
    27.                         <div id="heatmap-navigation">    
    28.                             <button id="heatmap-previous" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-left"></i></button>    
    29.                             <button id="heatmap-next" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-right"></i></button>    
    30.                         </div>    
    31.                         <div id="cal-heatmap">    
    32.                         </div>    
    33.                     </div>    
    34.                 </div>    
    35.             </div>    
    36.         </div>    
    37.     
    38.     
    39.         <script type="text/javascript">    
    40.             var cal = new CalHeatMap();    
    41.             cal.init({    
    42.                 domain: "month",    
    43.                 subDomain: "day",    
    44.                 cellSize: 20,    
    45.                 itemName: ["service ticket", "service tickets"],    
    46.                 data: {    
    47.                     "1452019700": 40,    
    48.                     "1454688100": 50,    
    49.                     "1452710900": 5,    
    50.                     "1452883700": 15,    
    51.                     "1453142900": 15,    
    52.                     "1453488500": 30,    
    53.                     "1456239700": 80,    
    54.                     "1453662300": 20,    
    55.                     "1455130100": 60,    
    56.                     "1455562100": 70,    
    57.                     "1455131100": 10,    
    58.                     "1456166900": 30,    
    59.                     "1456399000": 12,    
    60.                     "1451674100": 90    
    61.                 },    
    62.                 subDomainTextFormat: "%d",    
    63.                 range: 3,    
    64.                 displayLegend: true,    
    65.                 domainMargin: 20,    
    66.                 animationDuration: 800,    
    67.                 domainDynamicDimension: false,    
    68.                 start: new Date(2016, 01, 01),    
    69.                 end: new Date(2016, 02, 26),    
    70.                 scale: [10, 20, 80],    
    71.                 previousSelector: "#heatmap-previous",    
    72.                 nextSelector: "#heatmap-next",    
    73.             });    
    74.         </script>    
    75. </body>    
    76.     
    77. </html> 
    In above code base, you will notice references for D3.js and cal-heatmap.min.js
     
    As a standard, I am displaying my heatmap in a bootstrap panel.
     
    To generate and render heatmap, from the above code snippet the following elements are important,
     
    o <DIV> element
     
    <div id="cal-heatmap"></div>
     
    o Init() function of CalHeatMap
     
    var cal = new CalHeatMap();
     
    cal.init({.........});
     
    This init() function has multiple options to customize our calender and overlay data on it. This will be discussed in subsequent articles.
     
  2. Open index.html in a browser and see how heatmap is getting generated. Refer to  the following screenshot for the same. 
     
    screenshot
     
  3. Select the previous and next buttons to navigate through a heatmap.
     
    sample
     
    The above representation quickly highlights how calls are made by a service center in a month, the trend, and which days of a month are busy days for a service center. By showing such information further business decisions can be made easily.
So, start thinking and implementing how best we can visualize our data with the context and use of Cal-HeatMap.js.


Similar Articles