<![CDATA[ Heat map - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Heat map - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Mon, 01 Jun 2026 05:28:52 +0000 60 <![CDATA[ How to Create an Interactive Heatmap Using JavaScript ]]> https://www.freecodecamp.org/news/interactive-heatmap-in-javascript/ 66d460f633b83c4378a51841 Tue, 16 May 2023 23:26:39 +0000 By Shachee Swadia

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, and I’m excited to teach you how to create one with JavaScript in this tutorial.

What is a Heatmap?

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

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.

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.

The Heatmap Chart We'll Build

Here is how the final JS-based heatmap chart will look:

Image

Ready to dive in? Let's go!

How to Make a JavaScript Heatmap

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.

Don't worry about any complicated coding or overwhelming technicalities. We'll keep things straightforward and easy to understand.

1. Create an HTML Page

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 element to hold our chart. Let’s also specify the style of the div to make it stretch over the whole page. Don't worry, it’s easy-peasy:

<html>
  <head>
    <title>Heatmap in JavaScript</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Include the Required JavaScript Files

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.

There are a ton of various JS charting libraries out there. For this project, we're gonna go with the AnyChart JS library, which supports heatmap charts and is free for personal and other non-profit purposes.

To make things work, we need to add a couple of scripts to our web page's <head> section. Specifically, we need to include the base and heatmap modules. Sounds easy, right?

<html>
  <head>
    <title>Heatmap in JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-heatmap.min.js"></script> 
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS heatmap will come here
    </script>
  </body>
</html>

3. Add the Data

Each chart is complete with the data, right? We’re gonna grab our data from the NSC website and add it to our HTML file in the proper format.

For our heatmap, each data point needs to include an x value (day), a y value (hour), and a heat value (number of accidents). We'll wrap this data in a function that we'll call when we create the JS chart.

function getData() {
  return [
    {
      x: "Monday",
      y: "Midnight–3:59 a.m.",
      heat: 705
    },
    {
      x: "Monday",
      y: "4:00–7:59 a.m.",
      heat: 713
    },
    {
      x: "Monday",
      y: "8:00–11:59 a.m.",
      heat: 657
    },
    {
      x: "Monday",
      y: "Noon–3:59 p.m.",
      heat: 957
    },
    {
      x: "Monday",
      y: "4:00–7:59 p.m.",
      heat: 1137
    },
    {
      x: "Monday",
      y: "8:00–11:59 p.m.",
      heat: 956
    },
    {
      x: "Tuesday",
      y: "Midnight–3:59 a.m.",
      heat: 482
    },
    {
      x: "Tuesday",
      y: "4:00–7:59 a.m.",
      heat: 641
    },
    {
      x: "Tuesday",
      y: "8:00–11:59 a.m.",
      heat: 631
    },
    {
      x: "Tuesday",
      y: "Noon–3:59 p.m.",
      heat: 905
    },
    {
      x: "Tuesday",
      y: "4:00–7:59 p.m.",
      heat: 1137
    },
    {
      x: "Tuesday",
      y: "8:00–11:59 p.m.",
      heat: 986
    },
    {
      x: "Wednesday",
      y: "Midnight–3:59 a.m.",
      heat: 465
    },
    {
      x: "Wednesday",
      y: "4:00–7:59 a.m.",
      heat: 616
    },
    {
      x: "Wednesday",
      y: "8:00–11:59 a.m.",
      heat: 627
    },
    {
      x: "Wednesday",
      y: "Noon–3:59 p.m.",
      heat: 914
    },
    {
      x: "Wednesday",
      y: "4:00–7:59 p.m.",
      heat: 1159
    },
    {
      x: "Wednesday",
      y: "8:00–11:59 p.m.",
      heat: 1066
    },
    {
      x: "Thursday",
      y: "Midnight–3:59 a.m.",
      heat: 584
    },
    {
      x: "Thursday",
      y: "4:00–7:59 a.m.",
      heat: 718
    },
    {
      x: "Thursday",
      y: "8:00–11:59 a.m.",
      heat: 660
    },
    {
      x: "Thursday",
      y: "Noon–3:59 p.m.",
      heat: 966
    },
    {
      x: "Thursday",
      y: "4:00–7:59 p.m.",
      heat: 1161
    },
    {
      x: "Thursday",
      y: "8:00–11:59 p.m.",
      heat: 1186
    },
    {
      x: "Friday",
      y: "Midnight–3:59 a.m.",
      heat: 715
    },
    {
      x: "Friday",
      y: "4:00–7:59 a.m.",
      heat: 747
    },
    {
      x: "Friday",
      y: "8:00–11:59 a.m.",
      heat: 738
    },
    {
      x: "Friday",
      y: "Noon–3:59 p.m.",
      heat: 1056
    },
    {
      x: "Friday",
      y: "4:00–7:59 p.m.",
      heat: 1426
    },
    {
      x: "Friday",
      y: "8:00–11:59 p.m.",
      heat: 1631
    },
    {
      x: "Saturday",
      y: "Midnight–3:59 a.m.",
      heat: 1383
    },
    {
      x: "Saturday",
      y: "4:00–7:59 a.m.",
      heat: 641
    },
    {
      x: "Saturday",
      y: "8:00–11:59 a.m.",
      heat: 635
    },
    {
      x: "Saturday",
      y: "Noon–3:59 p.m.",
      heat: 1034
    },
    {
      x: "Saturday",
      y: "4:00–7:59 p.m.",
      heat: 1400
    },
    {
      x: "Saturday",
      y: "8:00–11:59 p.m.",
      heat: 1593
    },
    {
      x: "Sunday",
      y: "Midnight–3:59 a.m.",
      heat: 1486
    },
    {
      x: "Sunday",
      y: "4:00–7:59 a.m.",
      heat: 695
    },
    {
      x: "Sunday",
      y: "8:00–11:59 a.m.",
      heat: 564
    },
    {
      x: "Sunday",
      y: "Noon–3:59 p.m.",
      heat: 932
    },
    {
      x: "Sunday",
      y: "4:00–7:59 p.m.",
      heat: 1292
    },
    {
      x: "Sunday",
      y: "8:00–11:59 p.m.",
      heat: 1211
    }
  ];
}

4. Write the Necessary JS Code for the Chart

Here's the fun part: it's time to write the JavaScript code that'll make our heatmap chart look amazing.

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() function and add the data we created in the previous step.

let chart = anychart.heatMap(getData());

Then, we'll give the chart a descriptive title:

chart.title("Fatal Car Crashes in U.S. in 2021 by Time of Day and Day of Week”);

Finally, we'll set the container reference and draw the chart. Voilà!

сhart.container('container’);
chart.draw();

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. After that, we'll learn how to customize our heatmap in all kinds of fun ways.

Image

<html>
  <head>
    <title>Heatmap in JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-heatmap.min.js"></script> 
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // create a heatmap
        let chart = anychart.heatMap(getData());
        // name the heatmap
        chart.title("Fatal Car Crashes in U.S. in 2021 by Time of Day and Day of Week");
        // set the container for the heatmap
        chart.container("container");
        // draw the heatmap
        chart.draw();
      });
      // add the data
      function getData() {
        return [
          {
            x: "Monday",
            y: "Midnight–3:59 a.m.",
            heat: 705
          },
          {
            x: "Monday",
            y: "4:00–7:59 a.m.",
            heat: 713
          },
          {
            x: "Monday",
            y: "8:00–11:59 a.m.",
            heat: 657
          },
          {
            x: "Monday",
            y: "Noon–3:59 p.m.",
            heat: 957
          },
          {
            x: "Monday",
            y: "4:00–7:59 p.m.",
            heat: 1137
          },
          {
            x: "Monday",
            y: "8:00–11:59 p.m.",
            heat: 956
          },
          {
            x: "Tuesday",
            y: "Midnight–3:59 a.m.",
            heat: 482
          },
          {
            x: "Tuesday",
            y: "4:00–7:59 a.m.",
            heat: 641
          },
          {
            x: "Tuesday",
            y: "8:00–11:59 a.m.",
            heat: 631
          },
          {
            x: "Tuesday",
            y: "Noon–3:59 p.m.",
            heat: 905
          },
          {
            x: "Tuesday",
            y: "4:00–7:59 p.m.",
            heat: 1137
          },
          {
            x: "Tuesday",
            y: "8:00–11:59 p.m.",
            heat: 986
          },
          {
            x: "Wednesday",
            y: "Midnight–3:59 a.m.",
            heat: 465
          },
          {
            x: "Wednesday",
            y: "4:00–7:59 a.m.",
            heat: 616
          },
          {
            x: "Wednesday",
            y: "8:00–11:59 a.m.",
            heat: 627
          },
          {
            x: "Wednesday",
            y: "Noon–3:59 p.m.",
            heat: 914
          },
          {
            x: "Wednesday",
            y: "4:00–7:59 p.m.",
            heat: 1159
          },
          {
            x: "Wednesday",
            y: "8:00–11:59 p.m.",
            heat: 1066
          },
          {
            x: "Thursday",
            y: "Midnight–3:59 a.m.",
            heat: 584
          },
          {
            x: "Thursday",
            y: "4:00–7:59 a.m.",
            heat: 718
          },
          {
            x: "Thursday",
            y: "8:00–11:59 a.m.",
            heat: 660
          },
          {
            x: "Thursday",
            y: "Noon–3:59 p.m.",
            heat: 966
          },
          {
            x: "Thursday",
            y: "4:00–7:59 p.m.",
            heat: 1161
          },
          {
            x: "Thursday",
            y: "8:00–11:59 p.m.",
            heat: 1186
          },
          {
            x: "Friday",
            y: "Midnight–3:59 a.m.",
            heat: 715
          },
          {
            x: "Friday",
            y: "4:00–7:59 a.m.",
            heat: 747
          },
          {
            x: "Friday",
            y: "8:00–11:59 a.m.",
            heat: 738
          },
          {
            x: "Friday",
            y: "Noon–3:59 p.m.",
            heat: 1056
          },
          {
            x: "Friday",
            y: "4:00–7:59 p.m.",
            heat: 1426
          },
          {
            x: "Friday",
            y: "8:00–11:59 p.m.",
            heat: 1631
          },
          {
            x: "Saturday",
            y: "Midnight–3:59 a.m.",
            heat: 1383
          },
          {
            x: "Saturday",
            y: "4:00–7:59 a.m.",
            heat: 641
          },
          {
            x: "Saturday",
            y: "8:00–11:59 a.m.",
            heat: 635
          },
          {
            x: "Saturday",
            y: "Noon–3:59 p.m.",
            heat: 1034
          },
          {
            x: "Saturday",
            y: "4:00–7:59 p.m.",
            heat: 1400
          },
          {
            x: "Saturday",
            y: "8:00–11:59 p.m.",
            heat: 1593
          },
          {
            x: "Sunday",
            y: "Midnight–3:59 a.m.",
            heat: 1486
          },
          {
            x: "Sunday",
            y: "4:00–7:59 a.m.",
            heat: 695
          },
          {
            x: "Sunday",
            y: "8:00–11:59 a.m.",
            heat: 564
          },
          {
            x: "Sunday",
            y: "Noon–3:59 p.m.",
            heat: 932
          },
          {
            x: "Sunday",
            y: "4:00–7:59 p.m.",
            heat: 1292
          },
          {
            x: "Sunday",
            y: "8:00–11:59 p.m.",
            heat: 1211
          }
        ];
      }
    </script>
  </body>
</html>

This heatmap is both visually appealing and informative. Upon examining the chart, it becomes clear that there are certain times when the number of accidents is significantly higher. It is unsurprising to see that these peak times are during weekends and the darker hours of the day.

But there's a lot more we can do with our heatmap...

How to Customize a JS Heatmap

As we saw, having the basic chart ready was really simple and fast. But there is so much more we can do to enhance the heatmap. It's not so difficult, either.

How to Change the Color Palette

We can use a diverging colour palette to make our JavaScript heatmap more effective in highlighting the data. This type of color scheme helps to emphasize the difference between high and low values, with less being good and more being alarming.

We can define four colors and value ranges using an ordinal color scale and then set the chart colors to use that color scale. This way, we can create a heatmap that quickly draws the viewer's attention to the most significant data points.

Here's the code to do that:

let colorScale = anychart.scales.ordinalColor();
colorScale.ranges([
  { less: 500, color: "#B0D8A4" },
  { from: 500, to: 900, color: "#FEE191" },
  { from: 900, to: 1300, color: "#FD8060" },
  { greater: 1300, color: "#CC333F" }
]);
chart.colorScale(colorScale);

And here's the result:

Image

How to Modify the Hover Styling

When we change the color palette of our heatmap, we also need to modify the hover colors to match the base colors. This is simple to achieve with the color.darken function.

We can set the chart settings and hover chart settings to ensure that the hover colors match the base colors. This allows us to create a visually consistent and easy-to-read heatmap, making it more effective in communicating the underlying data.

chart
  .hovered()
  .fill(function () {
    return anychart.color.darken(this.sourceColor, 0.25);
  });

Image

How to Change the Labels

By default, the labels on our heatmap show the actual numbers. But we can customize the labels to provide greater flexibility and make the chart easier to read.

We can enable HTML for the labels to allow for greater formatting options. Then, we can configure the labels to display as 'low' to 'extreme' based on the value of the tile. We can also make the 'high' and 'extreme' values appear in bold to make them stand out.

// enable html for the labels
chart.labels().useHtml(true);

// configure the labels
chart.labels().format(function () {
  var heat = this.heat;
  if (heat < 500) return "Low";
  if (heat < 1000) return "Medium";
  if (heat < 1500) return "<span style='font-weight:bold'>High</span>";
  if (heat >= 1500) return "<span style='font-weight:bold'>Extreme</span>";
});

Image

In the final version, I decided to ultimately remove the labels since the colors are quite indicative of the values.

How to Format the Title and Tooltip

Now it's time to make our JS heatmap visualization even more exciting with some formatting tweaks.

First, we'll enable HTML for the tooltip, so we can customize it with some eye-catching formatting. We'll display the number of accidents in the heading and the day as well as the timing in the body of the tooltip. This will add more context and help the user to better understand the data.

chart.tooltip().title().useHtml(true);
chart
  .tooltip()
  .useHtml(true)
  .titleFormat(function () {
    return "Accidents - " + this.heat;
  })
  .format(function () {
    return (
      '<span style="color: #CECECE">Day: </span>' +
      this.x +
      "<br/>" +
      '<span style="color: #CECECE">Time: </span>' +
      this.y
    );
  });

Let’s also add a bit of padding under the main title to make it more spaced out and visually appealing:

chart
  .title()
  .enabled(true)
  .text("Fatal Car Crashes in U.S. in 2021 by Time of Day and Day of Week")
  .padding([0, 0, 20, 0]);

Here's what those modifcations look like:

Image

How to Modify the Axes

For better readability, we can add padding between the axes labels and the chart tiles and remove the axes lines since the tiles form a boundary by themselves.

chart.xAxis().stroke(null);
chart.yAxis().stroke(null);
chart.yAxis().labels().padding([0, 10, 0, 0]);
chart.xAxis().labels().padding([0, 0, 10, 0]);

And there you have it! With just a few aesthetic changes, we've transformed a simple heatmap into a stunning visualization that really drives home a powerful message. You can check it out below with the full source code, and you can take a closer look at the interactive version of the heatmap and play with the code live here.

Image

<html>
  <head>
    <title>Heatmap in JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-heatmap.min.js"></script> 
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // create a heatmap
        var chart = anychart.heatMap(getData());
        // set a custom color scale
        var colorScale = anychart.scales.ordinalColor();
        colorScale.ranges([
          { less: 500, color: "#B0D8A4" },
          { from: 500, to: 900, color: "#FEE191" },
          { from: 900, to: 1300, color: "#FD8060" },
          { greater: 1300, color: "#CC333F" }
        ]);
        chart.colorScale(colorScale);
        // style the coloring in the hovered state
        chart
          .hovered()
          .fill(function () {
            return anychart.color.darken(this.sourceColor, 0.25);
          });
        // hide the labels
        chart.labels(false);
        // customize the axes
        chart.xAxis().stroke(null);
        chart.yAxis().stroke(null);
        chart.yAxis().labels().padding([0, 10, 0, 0]);
        chart.xAxis().labels().padding([0, 0, 10, 0]);
        // set the tooltip
        chart.tooltip().title().useHtml(true);
        chart
          .tooltip()
          .useHtml(true)
          .titleFormat(function () {
            return "Accidents - " + this.heat;
          })
          .format(function () {
            return (
              '<span style="color: #CECECE">Day: </span>' +
              this.x +
              "<br/>" +
              '<span style="color: #CECECE">Time: </span>' +
              this.y
            );
          });
        // name the heatmap
        chart
          .title()
          .enabled(true)
          .text("Fatal Car Crashes in U.S. in 2021 by Time of Day and Day of Week")
          .padding([0, 0, 20, 0]);
        // set the container for the heatmap
        chart.container("container");
        // draw the heatmap
        chart.draw();
      });
      // add the data
      function getData() {
        return [
          {
            x: "Monday",
            y: "Midnight–3:59 a.m.",
            heat: 705
          },
          {
            x: "Monday",
            y: "4:00–7:59 a.m.",
            heat: 713
          },
          {
            x: "Monday",
            y: "8:00–11:59 a.m.",
            heat: 657
          },
          {
            x: "Monday",
            y: "Noon–3:59 p.m.",
            heat: 957
          },
          {
            x: "Monday",
            y: "4:00–7:59 p.m.",
            heat: 1137
          },
          {
            x: "Monday",
            y: "8:00–11:59 p.m.",
            heat: 956
          },
          {
            x: "Tuesday",
            y: "Midnight–3:59 a.m.",
            heat: 482
          },
          {
            x: "Tuesday",
            y: "4:00–7:59 a.m.",
            heat: 641
          },
          {
            x: "Tuesday",
            y: "8:00–11:59 a.m.",
            heat: 631
          },
          {
            x: "Tuesday",
            y: "Noon–3:59 p.m.",
            heat: 905
          },
          {
            x: "Tuesday",
            y: "4:00–7:59 p.m.",
            heat: 1137
          },
          {
            x: "Tuesday",
            y: "8:00–11:59 p.m.",
            heat: 986
          },
          {
            x: "Wednesday",
            y: "Midnight–3:59 a.m.",
            heat: 465
          },
          {
            x: "Wednesday",
            y: "4:00–7:59 a.m.",
            heat: 616
          },
          {
            x: "Wednesday",
            y: "8:00–11:59 a.m.",
            heat: 627
          },
          {
            x: "Wednesday",
            y: "Noon–3:59 p.m.",
            heat: 914
          },
          {
            x: "Wednesday",
            y: "4:00–7:59 p.m.",
            heat: 1159
          },
          {
            x: "Wednesday",
            y: "8:00–11:59 p.m.",
            heat: 1066
          },
          {
            x: "Thursday",
            y: "Midnight–3:59 a.m.",
            heat: 584
          },
          {
            x: "Thursday",
            y: "4:00–7:59 a.m.",
            heat: 718
          },
          {
            x: "Thursday",
            y: "8:00–11:59 a.m.",
            heat: 660
          },
          {
            x: "Thursday",
            y: "Noon–3:59 p.m.",
            heat: 966
          },
          {
            x: "Thursday",
            y: "4:00–7:59 p.m.",
            heat: 1161
          },
          {
            x: "Thursday",
            y: "8:00–11:59 p.m.",
            heat: 1186
          },
          {
            x: "Friday",
            y: "Midnight–3:59 a.m.",
            heat: 715
          },
          {
            x: "Friday",
            y: "4:00–7:59 a.m.",
            heat: 747
          },
          {
            x: "Friday",
            y: "8:00–11:59 a.m.",
            heat: 738
          },
          {
            x: "Friday",
            y: "Noon–3:59 p.m.",
            heat: 1056
          },
          {
            x: "Friday",
            y: "4:00–7:59 p.m.",
            heat: 1426
          },
          {
            x: "Friday",
            y: "8:00–11:59 p.m.",
            heat: 1631
          },
          {
            x: "Saturday",
            y: "Midnight–3:59 a.m.",
            heat: 1383
          },
          {
            x: "Saturday",
            y: "4:00–7:59 a.m.",
            heat: 641
          },
          {
            x: "Saturday",
            y: "8:00–11:59 a.m.",
            heat: 635
          },
          {
            x: "Saturday",
            y: "Noon–3:59 p.m.",
            heat: 1034
          },
          {
            x: "Saturday",
            y: "4:00–7:59 p.m.",
            heat: 1400
          },
          {
            x: "Saturday",
            y: "8:00–11:59 p.m.",
            heat: 1593
          },
          {
            x: "Sunday",
            y: "Midnight–3:59 a.m.",
            heat: 1486
          },
          {
            x: "Sunday",
            y: "4:00–7:59 a.m.",
            heat: 695
          },
          {
            x: "Sunday",
            y: "8:00–11:59 a.m.",
            heat: 564
          },
          {
            x: "Sunday",
            y: "Noon–3:59 p.m.",
            heat: 932
          },
          {
            x: "Sunday",
            y: "4:00–7:59 p.m.",
            heat: 1292
          },
          {
            x: "Sunday",
            y: "8:00–11:59 p.m.",
            heat: 1211
          }
        ];
      }
    </script>
  </body>
</html>

Conclusion

In conclusion, data visualization is an incredibly powerful tool that can help us uncover important insights from our data. And with JavaScript, creating beautiful and impactful charts, such as a heatmap, can be a breeze.

So don't be afraid to experiment with different chart types, styles, and libraries to create your own hard-hitting visualizations. And above all, remember to stay safe out there on the roads!

]]> <![CDATA[ Anyone Can Map! Inspiration and an introduction to the world of mapping ]]> https://www.freecodecamp.org/news/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/ 66b8e31e47c23b7ae1ad0bd3 Thu, 05 Mar 2020 14:51:00 +0000 Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of mapping?

Taking inspiration from a culinary great

If you’ve seen the Pixar movie Ratatouille, you should know who Chef Gusteau is. He helped our “little chef” Remy the rat navigate the culinary world and become the top chef of Paris.

Image Remy from Ratatouille overlooking Gusteau's in Paris

Throughout the movie, we get a lot of great quotes on their journey. But the one we're interested in here is Gusteau’s motto, and the title of his book, “Anyone can cook!” So how can we apply this and the lessons to our own mapping journey?

I’ll admit, part of the fun here was translating some of the lessons learned from one of my favorite movies, but there’s a lot to take in here. I'm going to walk through some examples and types of maps that should get you motivated to get started with your own mapping application. So let’s dive in!

Get inspired by learning about maps and the impact they have on the world

Food always comes to those who love to cook. - Chef Gusteau

Through my work, I’ve found it easy to fall in love with working on maps. Every day, scientists use maps to visualize data that can assist them in making more effective decisions. This directly translates to benefitting people all around the world and saving lives.

With this inspiration, you'll be taken on a journey to learn more about the different types of maps in this world and how they’re being used. You even might stumble upon some interesting data that explores your own neighborhood!

Active fires around the world

Take for instance NASA’s FIRMS service, which provides a realtime look at active fire data around the world.

Image Active fires around the world via NASA FIRMS

Fires are a real-world example of disasters that we can learn from. This tool is used to help manage resources for stopping and preventing those fires by allowing scientists and those that are curious to analyze burn areas and model the data itself.

Global cases of COVID-19

And something very current, cases of COVID-19 (Coronavrius) around the world by Johns Hopkins Center for Systems Science and Engineering.

Image Global cases of Coronavirus (COVID-19) from John Hopkins CSSE

This map tracks the spread of the virus in real time, allowing scientists to model it's coverage and produce study results to share with the global community.

Mapping tools like this provide an effective means of giving as much information as possible in a way that’s easy to understand to the people who can make a difference with the information.

Increased life expectancy

On a more positive note, we can get a detailed look over time of how life expectancy is improving around the world.

Image Life expectancy in 2019 from Our World in Data

While it’s increased more in some areas than others, the global improvements are clear, and we get to see this rise in some countries from hundreds of years ago!

Explore the beauty of maps and applying data to them

How can I describe it? Good food is like music you can taste, color you can smell. There is excellence all around you. You need only to be aware to stop and savor it. - Chef Gusteau

There’s also a creative side and beauty to great maps. Thick datasets applied to a map (or any medium) can often become literal works of art.

Image The Room of Change from Pentagram

Whether showcased in an exhibit or one of the many options to purchase on Etsy, presenting meaningful data in a beautiful way can be impactful not just from an informational perspective, but also a cultural one.

Sometimes the interactions can be fun

Maps can also provide some interactivity that makes them fun to explore while you learn more about the dataset, like this globe that maps out global commodities from DailyFX.

Image Global Commodities interactive map from DailyFX

Though the data can frequently be thick and boring on its own, that doesn’t mean we can't find more interesting ways to present the data to interact with.

And sometimes maps can provide a listening experience

This map from at radiooooo.com allows you to travel around the world and through time.

Image Music Radio from radiooooo.com

Their use of a map makes it easy to identify the part of the world the person wants to explore.

Stop and appreciate the maps around you

Whether you notice it or not when you’re browsing the web every day, you most likely run into visualizations of datasets that create powerful ways to present that data in a way that’s more easily understood.

Image _u/dancingchopstix's recordings of their truck driving travels_

Luckily, we don’t have to work hard to find this inspiration, as we can visit aggregations of beautiful maps and general datasets like that of /r/dataisbeautiful.

Experiment, be creative, explore other ways to visualize data

You must be imaginative, strong-hearted. You must try things that may not work, and you must not let anyone define your limits because of where you come from. Your only limit is your soul. - Chef Gusteau

Maps come in all shapes and sizes. While shaded geographic areas typically work well with election results, it might not work as well for showcasing your summer road trip.

Image 50 State Project road trip map

Exploring common map types

You’ve probably experienced more map types than you realize. Given it’s a powerful way to present data, maps are used frequently across the web.

A choropleth map is commonly seen for election results and regional datasets where a particular geographic location represents a point of reference.

Image CNN Map of Democratic primary after Super Tuesday

Heat maps on the other hand allow you to reflect on the intensity of a data point over a given area. This is powerful when you want to represent both the area covered of a dataset but also range the data represents at the same time, such as population density.

Image ArcGIS GPW 2015 Population Density heat map from

Learn from others, but don’t be afraid to create a new path

Explore and play around with different techniques to visualize data on a map. There’s frequently not one way to do it, meaning you can be creative and experiment with different ways of presenting your map.

But that also means you don’t need to be stuck working within the constraints of the common map types. Use the tools available or create new ones and break new ground. The most important thing is presenting the data in a way that will provide the most impact to those consuming it.

Don’t give up, learn from your experiences

What I say is true — anyone can cook... but only the fearless can be great. - Chef Gusteau

While there may not always be a right way, there sometimes are wrong ways. But don’t let failure stop you!

Take these failures as a learning experience in your journey of creating interesting and effective maps. By being bold with your experimentation, you’ll find yourself discovering techniques or creating new ways that can ultimately help people better understand map data.

You don’t have to be a cartographer to build great maps

Not everyone can become a great artist; but a great artist can come from anywhere. - Anton Ego

Towards the end of Remy’s journey, the food critic Anton Ego who was once critical of Gusteau's claim that “anyone can cook” came to a realization of what our chef truly meant.

Image Ratatouille critic Anton Ego's revelation

While it’s not reasonable to assume that every single one of us will be a great mapper, everyone has the opportunity to try and explore the medium.

And it certainly helps that we have plenty of tooling to help us get there. Whether building your own with Leaflet or identifying a few locations on a Google Map, the resources and community around mapping are endless.

Jump in with some resources to get started

For the developers out there who are inspired to get started, here are a few resources to start off with mapping:

What’s your favorite map experience or tool?

Share with me on Twitter!

]]> <![CDATA[ How to construct a heat map in React ]]> https://www.freecodecamp.org/news/a-heat-map-implementation-in-typescript/ 66d45f6333b83c4378a517e0 Sat, 24 Aug 2019 16:06:58 +0000 By Jeff M Lowery

Heat maps are a great way of visualizing correlations among two data sets. With colors and gradients, it is possible to see patterns in the data almost instantly.

I went searching for a heat map implementation in npm, but was unable to find one that I liked, so I wrote my own. It is still a work in progress, but does provide basic functionality.

There are actually two parts to the implementation: jsheatmap takes headings and row data to produce a JSON object where the raw input is scaled from 0.0 to 1.0 and then RGB colors are mapped to those scaled values. I will confess that most of this was already worked out by Andrew Noske, who provided a partial C++ implementation in his blog. Transliterating C++ to TypeScript was relatively easy.

The second part is an HTML presentation of the JSON data returned by jsheatmap. This would typically be the responsibility of the user of jsheatmap module, but I did build a general-purpose React application that demonstrates how HTML table cells can be used as a heat map representation.

The basics

First, install jsheatmap:

npm i -S jsheatmap

As mentioned, jsheatmap was written in TypeScript, but npm will install the generated JavaScript version of the TypeScript program, which is what your application will use.

Next, import the jsheatmap components.

import HeatMap, { Style } from "jsheatmap"

The Style component is not strictly required. As of this writing, there are only two Styles: SIMPLE and FANCY. FANCY is the default, which uses a 5-color gradient for the heat map RGB data. SIMPLE uses a three-color gradient, which you might prefer for smaller data sets. The style is passed to the getData() method, as will be shown later.

Instantiate a HeatMap with headings (column names) and row data:
const heatMap = new HeatMap(headings, rows)

where headings is an array of strings (column headings) and rows is an array of labels and cell data. For example:

// Days of rain in summer summer months, by year
const headings = ["June", "July", "August", "September"]  // the months
const rows = [["2015", [9, 5, 6, 8]],   // the years and rainy days by month
   ["2016", [7, 5, 10, 7]],
   ["2017", [7, 4, 3, 9]],
   ["2018", [10, 5, 6, 8]],
   ["2019", [8, 9, 3, 1]],]

Converting to RGB

Now is time to get the heat map data:

// const data = heatMap.getData({ style: Style.SIMPLE });
const data = heatMap.getData();

The default style is FANCY (five color gradient) whereas SIMPLE would use a three-color gradient for the RGB mapping.

Cell values are then scaled, relative to each other, with scale values determined by the high and low values of the input. Once all the inputs have been scaled from 0.0 to 1.0, they can be mapped to RGB color values. All of this data is returned by getData():

{
  "headings": [
    "Jun",
    "Jul",
    "Aug",
    "Sep"
  ],
  "high": 9,
  "low": 4,
  "rows": [
    {
      "label": "2015",
      "cells": {
        "values": [
          7,
          5,
          6,
          8
        ],
        "colors": [
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 0,
            "green": 1,
            "blue": 0.625
          },
          {
            "red": 1,
            "green": 0.588235294117647,
            "blue": 0
          }
        ],
        "scales": [
          0.6,
          0.2,
          0.4,
          0.8
        ]
      }
    },
    {
      "label": "2016",
      "cells": {
        "values": [
          7,
          5,
          5,
          7
        ],
        "colors": [
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          }
        ],
        "scales": [
          0.6,
          0.2,
          0.2,
          0.6
        ]
      }
    },
    {
      "label": "2017",
      "cells": {
        "values": [
          7,
          4,
          5,
          9
        ],
        "colors": [
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          },
          {
            "red": 0,
            "green": 0,
            "blue": 1
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 1,
            "green": 0,
            "blue": 0
          }
        ],
        "scales": [
          0.6,
          0,
          0.2,
          1
        ]
      }
    },
    {
      "label": "2018",
      "cells": {
        "values": [
          6,
          5,
          7,
          8
        ],
        "colors": [
          {
            "red": 0,
            "green": 1,
            "blue": 0.625
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          },
          {
            "red": 1,
            "green": 0.588235294117647,
            "blue": 0
          }
        ],
        "scales": [
          0.4,
          0.2,
          0.6,
          0.8
        ]
      }
    },
    {
      "label": "2019",
      "cells": {
        "values": [
          8,
          6,
          6,
          8
        ],
        "colors": [
          {
            "red": 1,
            "green": 0.588235294117647,
            "blue": 0
          },
          {
            "red": 0,
            "green": 1,
            "blue": 0.625
          },
          {
            "red": 0,
            "green": 1,
            "blue": 0.625
          },
          {
            "red": 1,
            "green": 0.588235294117647,
            "blue": 0
          }
        ],
        "scales": [
          0.8,
          0.4,
          0.4,
          0.8
        ]
      }
    }
  ]
}

For the demonstration application, I use React to generate a table with each element's background styled as follows: 

const background = (rgb) => {    
    return `rgb(${rgb.red * 100}%, ${rgb.green * 100}%, ${rgb.blue * 100}%)`;
}

Where rgb() is the built-in CSS function for RGB colors, and the passed-in rgb parameter comes from the cell colors of the row generated by getData(). To run the implementation, first clone the repository:

git clone [https://github.com/JeffML/sternomap.git](https://github.com/JeffML/sternomap.git)

then go to the sternomap folder and run:

npm install

finally:

npm run start

As an aside: the application was originally generated using Create React App, and the README.md file explains all that in detail.

The output

Once the script has finished, it will load a page in your browser (I use Chrome). Here's a snapshot:

Image

This shows rainy days per month in each cell, by year. From this you can see that the driest months are July and August, with the wettest being September. The number inside each cell is the scaled value of the raw input (rainy days), so the least rainy days were in July of 2017, and the most in September of that year.

A rainbow of colors

I can generate a data set where the value of each cell is the sum of it's x + y coordinates. For row labels, I use the npm module casual to create them.

Image

The wrap up

I have some plans to use this heat map implementation in other projects, which I am sure will require changes to the API, but the basics should remain the same. If you decide to try this and find it useful, let me know.

]]>