{"id":16641,"date":"2023-05-30T07:21:20","date_gmt":"2023-05-30T07:21:20","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16641"},"modified":"2023-05-30T14:22:13","modified_gmt":"2023-05-30T14:22:13","slug":"heatmap-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/05\/30\/heatmap-js\/","title":{"rendered":"How to Build Heatmap in JavaScript"},"content":{"rendered":"

\"Heatmap<\/a>Data visualization is a powerful tool that helps us make sense of complex data. With it, we can spot patterns and trends that might take much more time to become obvious just by looking at raw numbers. One particularly useful chart type is the heatmap<\/strong>, and I\u2019m excited to teach you how to create one with JavaScript in this tutorial.<\/p>\n

<\/p>\n

What is a Heatmap?<\/h2>\n

A heatmap is a two-dimensional representation of the magnitude of a phenomenon through colors. It provides a quick visual summary<\/a> of high and low values in the data. <\/p>\n

For instance, did you know that an average of 108 people died per day in road accidents in the U.S. in 2021? Using a heatmap chart, we can analyze the days and times of fatal accidents. This will be the visualization we will be building during the tutorial.<\/p>\n

So, grab your cup of coffee and let’s dive into this step-by-step guide. By the end, you’ll have the skills to easily create your own interactive JavaScript heatmaps.<\/p>\n

The Heatmap Chart We’ll Build<\/h1>\n

Here is how the final JS-based heatmap chart will look:<\/p>\n

\"Here<\/p>\n

Ready to dive in? Let’s go!<\/p>\n

How to Make a JavaScript Heatmap<\/strong><\/h1>\n

Great, let’s start creating a simple yet beautiful heatmap chart using JavaScript. With just four easy-to-follow steps, you’ll have a stunning interactive heatmap in no time. <\/p>\n

Don’t worry about any complicated coding or overwhelming technicalities. We’ll keep things straightforward and easy to understand.<\/p>\n

1. Create an HTML Page<\/h2>\n

First things first, we need to create a web page that’ll hold our super-cool heatmap. We start by making a basic HTML page, complete with a div<\/code> element to hold our chart. Let\u2019s also specify the style of the div<\/code> to make it stretch over the whole page. Don’t worry, it\u2019s easy-peasy:<\/p>\n

<html>\r\n  <head>\r\n    <title>Heatmap in JavaScript<\/title>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
2. Include the Required JavaScript Files<\/h2>\n
Okay, let’s be real: building a JS heatmap from scratch would be a real pain in the you-know-what. Instead, we’re gonna take the easier route and use a JavaScript charting library. <\/p>\n
There are a ton of various JS charting libraries<\/a> out there. For this project, we’re gonna go with the AnyChart JS library<\/a>, which supports heatmap charts and is free for personal and other non-profit purposes. <\/p>\n
To make things work, we need to add a couple of scripts to our web page’s <head><\/code> section. Specifically, we need to include the core and heatmap modules. Sounds easy, right?<\/p>\n
<html>\r\n  <head>\r\n    <title>Heatmap in JavaScript<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-heatmap.min.js\"><\/script> \r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; margin: 0; padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>  \r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ All the code for the JS heatmap will come here\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
3. Add the Data<\/h2>\n
Each chart is complete with the data, right? We\u2019re gonna grab our data from the NSC website<\/a> and add it to our HTML file in the proper format.<\/p>\n
For our heatmap, each data point needs to include an x<\/code> value (day), a y<\/code> value (hour), and a heat<\/code> value (number of accidents). We’ll wrap this data in a function that we’ll call when we create the JS chart.<\/p>\n
function getData() {\r\n  return [\r\n    {\r\n      x: \"Monday\",\r\n      y: \"Midnight\u20133:59 a.m.\",\r\n      heat: 705\r\n    },\r\n    {\r\n      x: \"Monday\",\r\n      y: \"4:00\u20137:59 a.m.\",\r\n      heat: 713\r\n    },\r\n    {\r\n      x: \"Monday\",\r\n      y: \"8:00\u201311:59 a.m.\",\r\n      heat: 657\r\n    },\r\n    {\r\n      x: \"Monday\",\r\n      y: \"Noon\u20133:59 p.m.\",\r\n      heat: 957\r\n    },\r\n    {\r\n      x: \"Monday\",\r\n      y: \"4:00\u20137:59 p.m.\",\r\n      heat: 1137\r\n    },\r\n    {\r\n      x: \"Monday\",\r\n      y: \"8:00\u201311:59 p.m.\",\r\n      heat: 956\r\n    },\r\n    {\r\n      x: \"Tuesday\",\r\n      y: \"Midnight\u20133:59 a.m.\",\r\n      heat: 482\r\n    },\r\n    {\r\n      x: \"Tuesday\",\r\n      y: \"4:00\u20137:59 a.m.\",\r\n      heat: 641\r\n    },\r\n    {\r\n      x: \"Tuesday\",\r\n      y: \"8:00\u201311:59 a.m.\",\r\n      heat: 631\r\n    },\r\n    {\r\n      x: \"Tuesday\",\r\n      y: \"Noon\u20133:59 p.m.\",\r\n      heat: 905\r\n    },\r\n    {\r\n      x: \"Tuesday\",\r\n      y: \"4:00\u20137:59 p.m.\",\r\n      heat: 1137\r\n    },\r\n    {\r\n      x: \"Tuesday\",\r\n      y: \"8:00\u201311:59 p.m.\",\r\n      heat: 986\r\n    },\r\n    {\r\n      x: \"Wednesday\",\r\n      y: \"Midnight\u20133:59 a.m.\",\r\n      heat: 465\r\n    },\r\n    {\r\n      x: \"Wednesday\",\r\n      y: \"4:00\u20137:59 a.m.\",\r\n      heat: 616\r\n    },\r\n    {\r\n      x: \"Wednesday\",\r\n      y: \"8:00\u201311:59 a.m.\",\r\n      heat: 627\r\n    },\r\n    {\r\n      x: \"Wednesday\",\r\n      y: \"Noon\u20133:59 p.m.\",\r\n      heat: 914\r\n    },\r\n    {\r\n      x: \"Wednesday\",\r\n      y: \"4:00\u20137:59 p.m.\",\r\n      heat: 1159\r\n    },\r\n    {\r\n      x: \"Wednesday\",\r\n      y: \"8:00\u201311:59 p.m.\",\r\n      heat: 1066\r\n    },\r\n    {\r\n      x: \"Thursday\",\r\n      y: \"Midnight\u20133:59 a.m.\",\r\n      heat: 584\r\n    },\r\n    {\r\n      x: \"Thursday\",\r\n      y: \"4:00\u20137:59 a.m.\",\r\n      heat: 718\r\n    },\r\n    {\r\n      x: \"Thursday\",\r\n      y: \"8:00\u201311:59 a.m.\",\r\n      heat: 660\r\n    },\r\n    {\r\n      x: \"Thursday\",\r\n      y: \"Noon\u20133:59 p.m.\",\r\n      heat: 966\r\n    },\r\n    {\r\n      x: \"Thursday\",\r\n      y: \"4:00\u20137:59 p.m.\",\r\n      heat: 1161\r\n    },\r\n    {\r\n      x: \"Thursday\",\r\n      y: \"8:00\u201311:59 p.m.\",\r\n      heat: 1186\r\n    },\r\n    {\r\n      x: \"Friday\",\r\n      y: \"Midnight\u20133:59 a.m.\",\r\n      heat: 715\r\n    },\r\n    {\r\n      x: \"Friday\",\r\n      y: \"4:00\u20137:59 a.m.\",\r\n      heat: 747\r\n    },\r\n    {\r\n      x: \"Friday\",\r\n      y: \"8:00\u201311:59 a.m.\",\r\n      heat: 738\r\n    },\r\n    {\r\n      x: \"Friday\",\r\n      y: \"Noon\u20133:59 p.m.\",\r\n      heat: 1056\r\n    },\r\n    {\r\n      x: \"Friday\",\r\n      y: \"4:00\u20137:59 p.m.\",\r\n      heat: 1426\r\n    },\r\n    {\r\n      x: \"Friday\",\r\n      y: \"8:00\u201311:59 p.m.\",\r\n      heat: 1631\r\n    },\r\n    {\r\n      x: \"Saturday\",\r\n      y: \"Midnight\u20133:59 a.m.\",\r\n      heat: 1383\r\n    },\r\n    {\r\n      x: \"Saturday\",\r\n      y: \"4:00\u20137:59 a.m.\",\r\n      heat: 641\r\n    },\r\n    {\r\n      x: \"Saturday\",\r\n      y: \"8:00\u201311:59 a.m.\",\r\n      heat: 635\r\n    },\r\n    {\r\n      x: \"Saturday\",\r\n      y: \"Noon\u20133:59 p.m.\",\r\n      heat: 1034\r\n    },\r\n    {\r\n      x: \"Saturday\",\r\n      y: \"4:00\u20137:59 p.m.\",\r\n      heat: 1400\r\n    },\r\n    {\r\n      x: \"Saturday\",\r\n      y: \"8:00\u201311:59 p.m.\",\r\n      heat: 1593\r\n    },\r\n    {\r\n      x: \"Sunday\",\r\n      y: \"Midnight\u20133:59 a.m.\",\r\n      heat: 1486\r\n    },\r\n    {\r\n      x: \"Sunday\",\r\n      y: \"4:00\u20137:59 a.m.\",\r\n      heat: 695\r\n    },\r\n    {\r\n      x: \"Sunday\",\r\n      y: \"8:00\u201311:59 a.m.\",\r\n      heat: 564\r\n    },\r\n    {\r\n      x: \"Sunday\",\r\n      y: \"Noon\u20133:59 p.m.\",\r\n      heat: 932\r\n    },\r\n    {\r\n      x: \"Sunday\",\r\n      y: \"4:00\u20137:59 p.m.\",\r\n      heat: 1292\r\n    },\r\n    {\r\n      x: \"Sunday\",\r\n      y: \"8:00\u201311:59 p.m.\",\r\n      heat: 1211\r\n    }\r\n  ];\r\n}<\/code><\/pre>\n
4. Write the Necessary JS Code for the Chart<\/h2>\n
Here’s the fun part: it’s time to write the JavaScript code that’ll make our heatmap chart look amazing.<\/p>\n
We’ll enclose everything in a function to ensure the code only executes when the page is ready. We’ll create the graph using the heatMap()<\/code> function and add the data we created in the previous step.<\/p>\n
let chart = anychart.heatMap(getData());<\/code><\/pre>\n
Then, we’ll give the chart a descriptive title:<\/p>\n
chart.title(\"Fatal Car Crashes in U.S. in 2021 by Time of Day and Day of Week\u201d);<\/code><\/pre>\n
Finally, we’ll set the container reference and draw the chart. Voil\u00e0!<\/p>\n
\u0441hart.container('container\u2019);\r\nchart.draw();<\/code><\/pre>\n
And there you have it. With just a little bit of HTML and JavaScript, you can create a totally rad interactive heatmap. You can see the entire code of this JS-based heatmap below and check it out live here<\/a>. After that, we’ll learn how to customize our heatmap in all kinds of fun ways.<\/p>\n