Heatmaps Using JavaScript: Part One

Madan Bhintade
8y
7k
0
1

Article

Heatmaps

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 .

Typically, heat maps show greater color shade or a color density with 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 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 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.

Create index.html and copy paste below code,
1. <!DOCTYPE html>
2. <html lang="en">
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>
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>
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>
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.
Open index.html in browser and see how heatmap is getting generated. Refeto the following screenshot for the same.
Select previous and next buttons to navigate through heatmap.

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.