Opening the black box of Heat Map Visualization

As the world becomes a more competitive place to live in and amounts of data are constantly increasing, it’s crucial to keep up with the newest trends in data visualization to convey its meaning and make it easier for a human brain to perceive.

Whereas tables and charts have to be interpreted and understood, a Heat Map tends to be a self-explanatory kind of visual storytelling. It embodies a 2D visualization with color as a 3rd dimension. You can visualize your data through variations in coloring which correspond to variance across multiple variables.

Popular case studies

At first glance at the name it may seem that a style="font-size: 16px;">Heat Map is always related to real maps and geospatial data only, but in fact, it finds its application in different spheres:

• Web analytics: understanding which parts of a web page receive the most attention from visitors and what distracts them from the main content. It helps to decide where to place important information or how to redesign the website.
• Content marketing: analogous scroll map helps to know whether readers reach the end of the post.
• Product placement: understanding the behavior of customers by investigation of their shopping patterns.
• Uber: Indication areas of the highest demand for rides.
• Geography: a reflection of population density. 

And lots more.

Flexmonster Pivot Table provides an excellent opportunity to try this kind of real-time visualization. Move further to see how powerful it can be in practice. This article shows how to apply this technique to your business reports and identify new patterns, trends, and correlations in data if they exist.

So let’s see how it can be easily implemented with Flexmonster Pivot Table.

How to do it with Flexmonster Pivot Table

We’ll walk you through step-by-step to explain how to build a Heat Map analysis quickly.

If you feel that you don't understand some steps and want to see the full code, scroll down confidently and play with JSFiddle demo.

You can consider your table with data as a matrix where each value is represented by a color from a color range.

STEP 1: Define your own color scheme

Choose a set of colors which is arranged from cold to warm shades (the highest value is the hottest, that’s why it’s a heat map). Or vice versa as in href="https://jsfiddle.net/flexmonster/vu85jggk/">our example: the higher the revenue of the particular product, the greener the cell is.

var colorScheme = [ "#F8746D", "#FA9172", "#FBAE78", "#FDD17F",
"#F7E683", "#DBE081", "#C3D980", "#9FCF7E", "#7DC57C", "#68BF7B"]

Supposing that you use the numerical data, choose a color from a color scale in order to represent the difference in high and low values. In  href="https://jsfiddle.net/flexmonster/vu85jggk/">our demo, we’ve chosen the gradation of 10 different colors: from red to green shades. The best practice for the heat map is a scale from blue to red or a spectrum between two analogous colors to show the intensity.

STEP 2: Choose your own customization logic

Before the start, define the limits of values of your data and declare them in code as global variables, assigning them the values at the same time.

var minValue = 0;
var maxValue = 15000;

By default, all data cells have the same background color on the grid. To change it you can use a Flexmonster’s function customizeCell which is responsible for customizing the look and feel of your table. In our case, its functionality serves for the coloring of the cells from a given range of colors in the array.

The idea lies in checking if the cell is not empty, then checking the type of the cell using the type property of the cell data object. Since we work with numerical data, you only need to check whether data has a type "value". Through the property value, you can easily access the contents of this numeric cell.

In the current example, we don’t want to color cells from the Total Row and Grand Total Column as they display the total sum of the revenue.

In case you want to color them according to the same logic as for other cells, remove the !data.isTotal condition from the code snippet mentioned below.

function getColorFromRange(value) {
    if (isNaN(value)) {
        value = minValue;
    }
    value = Math.max(minValue, Math.min(value, maxValue));
    var perc = (minValue + value) / maxValue;
    var colorIdx = Math.round((colorScheme.length - 1) * perc);
    return colorScheme[colorIdx];
}

After the necessary condition is satisfied, the style of the cell data object is changed by choosing the color from the defined scheme and the new color is set. For this result, you can write a function that implements your own color selection logic.

function getColorFromRange(value) {
    if (isNaN(value)) {
        value = minValue;
    }
    value = Math.max(minValue, Math.min(value, maxValue));
    var perc = (minValue + value) / maxValue;
    var colorIdx = Math.round((colorScheme.length - 1) * perc);
    return colorScheme[colorIdx];
}

STEP 3: Apply a customization to your pivot table

Before starting to personalize the report according to your own taste, we hope you’ve managed to embed a component instance into your project with the help of our detailed href="https://www.flexmonster.com/doc/how-to-create-js-pivottable/">Quickstart. Now you can tell the component to apply the function you’ve defined before. href="https://jsfiddle.net/flexmonster/vu85jggk/">In the demo on JSFiddle, you’ll see a more detailed code with the configuration of a slice, filters, measures, and formats. To keep it more neat and simple, we don’t include them in this article.

Here is an example of how your code should look like.

var pivot = new Flexmonster({
    container: "pivot-container",
    componentFolder: "https://cdn.flexmonster.com/",
    toolbar: true,
    customizeCell: customizeCellFunction, // Apply the customization to your Pivot Table
    report: {
        dataSource: {
            filename: "data/sales.csv" // Define a path to your dataset
        }
    }
});

We do hope this approach convinced you how powerful for the web reporting a union of Flexmonster and Heat Map analysis can be. Now you can truly enrich your data presentation with this easy-to-use visualization tool and try a Heat Map with your own real data.

Feel free to add a Pivot Table as a part of your BI Solution.

Just download a free trial and start experimenting!