An Introduction To D3 Heat Maps

May 3, 2022 135 Views

A heat map is a graphical representation of a numerical dataset. More importantly, heat maps are a fantastic way to analyze the frequency of a data set. They display different color indications from warm to cool in specific x and y-axis areas. That means they represent more significant (or frequent) interactions using warmer colors, while colder colors represent lower user interactions. The following graph shows a sample D3 heat map.

A heat map represents the relationship between two variables. By analyzing cell colors, you can determine the patterns between both variables. Variables can be any data type since we consider values as categorical numeric values or labels. The heat map shows the row(x-axis)/ column(y-axis)/ value when you move the mouse cursor over a section.

What are the different types of heat maps and different things you can do with them?

You can see different types of heat maps used in the different areas. These include website heat maps, geographical heat maps, stock market analysis heat maps, heat maps for financial services or sports, and more. The key benefit of any type of heat map is it converts complex numerical datasets into a simple, understandable visual graph.

What are website heat maps?

Website heat maps help product managers, product owners, and website owners determine how users interact with their website, make critical decisions, and find answers to critical questions. Suppose you have a website with considerable user traffic daily. With heat maps you can identify:

user behaviors, interactions and evaluate user interests on the website
things ignored by website users
issues across different devices
if users are reaching important content

As businesses can improve their websites by tracking user behaviors and discovering actionable scenes and activities. Online stores, media services, travel and hotel sites, and eCommerce sites all use heat maps. They use them to measure a website’s performance, understand guest behavior, and determine friction scopes by recognizing dead clicks and redundant links.

For example, Netflix uses heat maps to determine a user’s streaming interests, most commonly watched movies and tv shows, identify most visited categories, and personalize each user’s experience. Here is a sample Netflix heat map:

Image source: GigaOm

How do the stock market and financial services use heatmaps?

Stock markets and financial service providers use heatmaps to make future decisions. Examples include identifying trending stocks, shares to buy and best selling prices, and the best time to invest in a bullish or bearish market.

From a financial perspective, we can use heat maps to visualize action items in companies like:

Interest rate fluctuations and fixed deposit placement ratios in banks
How investments in different assets such as blockchain, fixed deposits, treasury bonds, debentures, and share market bring ROI to the company?
How annual budget allocations compare with past years.

These are only a few use cases of heat maps used in the financial industry. Most organizations use heat maps for future predictions, to understand how their business behaves in certain environments, and make top management decisions.

What does D3 stand for?

D3 (Data-Driven Components) is a feature-rich Sencha Ext JS package. It enables you to build highly interactive data visualizations in a browser using modern web standards. These standards include HTML, SVG, and CSS. D3 is also open-source and free, so you can use it without spending any money.

D3 isn’t a one-size-fits-all framework that attempts to do everything. Instead, D3 concentrates on the source of the problem: data-driven document modification. This gets rid of proprietary representations and gives you a lot of flexibility, enabling web standards such as HTML, SVG, and CSS to show through. D3 is a fast, low-overhead database that can manage large datasets as well as dynamic actions for engagement and animation. D3’s functional architecture permits code reuse through a diverse array of conventional and community-developed components.

What are D3 Heat Maps?

The ‘d3-heatmap’ component is used to show matrices with color-coded individual values. This component employs two Ext.d3.axes which are Data axes and a single Ext.d3.axis. A color axis represents the numbers. Heatmaps are a great way to show three-dimensional data in a two-dimensional graph. The HeatMap element casts X and Y data to axes, as you might expect. After that, it creates a “color axis” from the Z values.

How can you create heat maps using your JS Framework?

Creating heat maps is not difficult. You can provide x and y-axis data and a data set to generate a heat map using the D3 heat map in the ExtJS framework. The following code and heat map shows the relationship between different products and purchases in a coffee shop during a week.

Code snippet

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: 'Heatmap Chart',
    height: 250,
    width: 250,
    layout: 'fit',
    items: [
        {
            xtype: 'd3-heatmap',
            padding: {
                top: 5,
                right: 5,
                bottom: 5,
                left: 50
            },
 
            xAxis: {
                axis: {
                    ticks: 'd3.time.days',
                    tickFormat: "d3.time.format('%b %d')",
                    orient: 'bottom'
                },
                scale: {
                    type: 'time'
                },
                title: {
                    text: 'Date'
                },
                field: 'date',
                step: 24 * 60 * 60 * 1000
            },
 
            yAxis: {
                axis: {
                    orient: 'left'
                },
                scale: {
                    type: 'linear'
                },
                title: {
                    text: 'Total'
                },
                field: 'bucket',
                step: 50
            },
 
            colorAxis: {
                scale: {
                    type: 'linear',
                    range: ['white', 'green']
                },
                field: 'count',
                minimum: 0
            },
 
            tiles: {
                attr: {
                    'stroke': 'black',
                    'stroke-width': 1
                }
            },
 
            store: {
                fields: [
                    {name: 'date', type: 'date', dateFormat: 'Y-m-d'},
                    'bucket',
                    'count'
                ],
                data: [
                    { "date": "2022-04-01", "bucket": 100, "count": 35 },
                    { "date": "2022-04-01", "bucket": 50,  "count": 500 },
                    { "date": "2022-04-01", "bucket": 150, "count": 20 },
                    { "date": "2022-04-02", "bucket": 300, "count": 18 },
                    { "date": "2022-04-02", "bucket": 50,  "count": 20 },
                    { "date": "2022-04-02", "bucket": 100, "count": 150 },
                    { "date": "2022-04-04", "bucket": 300, "count": 5 },
                    { "date": "2022-04-04", "bucket": 450, "count": 52 },
                    { "date": "2022-04-04", "bucket": 100, "count": 45 },
                    { "date": "2022-04-05", "bucket": 150, "count": 89 },
                    { "date": "2022-04-05", "bucket": 250, "count": 50 },
                    { "date": "2022-04-05", "bucket": 50,  "count": 10 },
                    { "date": "2022-04-06", "bucket": 350, "count": 5 },
                    { "date": "2022-04-06", "bucket": 400, "count": 63 },
                    { "date": "2022-04-06", "bucket": 250, "count": 58 }              
                ]
            }
        }
    ]
});

D3 heat map generated using Ext JS

Why should you use Sencha Ext JS?

You can develop your heat map using any JS framework or code editor such as VS Code and notepad++, but you need Sencha ExtJS as your JS framework because it provides you with the enhanced and advanced Ext.d3.heat map library. Using Sencha makes your JS coding easier and more efficient since it is easy to set up, supports MVC design patterns, auto-generates code, and helps you create beautiful UI components. Since the Sencha framework has a large community, numerous blog posts, and documentation, it also helps you design and implement your own customized and advanced heat maps.

Get started with Sencha Ext JS today!