![A 3D triangulation coverage heatmap](https://upload.wikimedia.org/wikipedia/commons/c/c5/A_3D_triangulation_coverage_heatmap.jpg)
A heat map (or heatmap) is a
data visualization
Data and information visualization (data viz or info viz) is an interdisciplinary field that deals with the graphic representation of data and information. It is a particularly efficient way of communicating when the data or information is num ...
technique that shows magnitude of a phenomenon as color in two dimensions. The variation in color may be by
hue
In color theory, hue is one of the main properties (called Color appearance model#Color appearance parameters, color appearance parameters) of a color, defined technically in the CIECAM02 model as "the degree to which a Stimulus (physiology ...
or
intensity
Intensity may refer to:
In colloquial use
*Strength (disambiguation)
*Amplitude
* Level (disambiguation)
* Magnitude (disambiguation)
In physical sciences
Physics
*Intensity (physics), power per unit area (W/m2)
*Field strength of electric, ma ...
, giving obvious visual cues to the reader about how the phenomenon is clustered or varies over space. There are two fundamentally different categories of heat maps: the cluster heat map and the spatial heat map. In a cluster heat map, magnitudes are laid out into a matrix of fixed cell size whose rows and columns are discrete phenomena and categories, and the sorting of rows and columns is intentional and somewhat arbitrary, with the goal of suggesting clusters or portraying them as discovered via statistical analysis. The size of the cell is arbitrary but large enough to be clearly visible. By contrast, the position of a magnitude in a spatial heat map is forced by the location of the magnitude in that space, and there is no notion of cells; the phenomenon is considered to vary continuously.
"Heat map" is a relatively new term, but the practice of shading matrices has existed for over a century.
History
Heat maps originated in 2D displays of the values in a data matrix. Larger values were represented by small dark gray or black squares (pixels) and smaller values by lighter squares. (1873) used a shading matrix to visualize social statistics across the districts of
Paris
Paris () is the capital and most populous city of France, with an estimated population of 2,165,423 residents in 2019 in an area of more than 105 km² (41 sq mi), making it the 30th most densely populated city in the world in 2020. S ...
.
Sneath (1957) displayed the results of a
cluster analysis
Cluster analysis or clustering is the task of grouping a set of objects in such a way that objects in the same group (called a cluster) are more similar (in some sense) to each other than to those in other groups (clusters). It is a main task of ...
by permuting the rows and the columns of a matrix to place similar values near each other according to the clustering.
Jacques Bertin
Jacques Bertin (27 July 1918 – 3 May 2010) was a French cartographer and theorist, known from his book ''Semiologie Graphique'' (''Semiology of Graphics''), published in 1967. This monumental work, based on his experience as a cartographer and ...
used a similar representation to display data that conformed to a
Guttman scale. The idea for joining cluster trees to the rows and columns of the data matrix originated with Robert Ling in 1973. Ling used overstruck printer characters to represent different shades of gray, one character-width per pixel.
Leland Wilkinson
Leland Wilkinson (November 5, 1944 – December 10, 2021) was an American statistician and computer scientist at H2O.ai and Adjunct Professor of Computer Science at University of Illinois at Chicago. Wilkinson developed the SYSTAT statistical p ...
developed the first computer program in 1994 (
SYSTAT) to produce cluster heat maps with high-resolution color graphics. The Eisen et al. display shown in the figure is a replication of the earlier SYSTAT design.
Software designer
Cormac Kinney
Cormac Kinney is a serial fintech entrepreneur, known for Diamond Standard, a regulator-approved fungible diamond commodity, Heatmaps, cited in 5,800 US Patents, and a publisher social network acquired by News Corp.
Early life
Kinney grew up ...
trademarked the term 'heat map' in 1991 to describe a 2D display depicting
financial market
A financial market is a market in which people trade financial securities and derivatives at low transaction costs. Some of the securities include stocks and bonds, raw materials and precious metals, which are known in the financial markets ...
information.
The company that acquired Kinney's invention in 2003 unintentionally allowed the trademark to lapse.
![World heat map](https://upload.wikimedia.org/wikipedia/commons/e/e7/World_heat_map.png)
Types
There are two main type of heat maps: spatial, and grid.
A spatial heat map displays the magnitude of a spatial phenomena as color, usually cast over a map. In the image labeled “Spatial Heat Map Example,” temperature is displayed by color range across a map of the world. Color ranges from blue (cold) to red (hot).
A grid heat map displays magnitude as color in a two-dimensional matrix, with each dimension representing a category of trait and the color representing the magnitude of some measurement on the combined traits from each of the two categories. For example, one dimension might represent year, and the other dimension might represent month, and the value measured might be temperature. This heat map would show how temperature changed over the years in each month. Grid heat maps are further categorized into two different types of matrices: clustered, and correlogram.
* Clustered heat map: The example of the monthly temperature by year is a clustered heat map.
* Correlogram: A correlogram is a clustered heat map that has the same trait for each axis in order to display how the traits in the set of traits interact with each other. The correlogram is a triangle instead of a square because the combination of A-B is the same as the combination of B-A and so does not need to be expressed twice.
Uses
Heat maps have a wide range of possibilities amongst applications due to their ability to simplify data and make for visually appealing to read data analysis. Many applications using different types of heat maps are listed below.
Business Analysis
Business analysis is a professional discipline of identifying business needs and determining solutions to business problems. Solutions often include a software-systems development component, but may also consist of process improvements, organizat ...
: Heat maps are used in business analytics to give a visual representation about a company’s current functioning, performance, and the need for improvements. Heat maps are a way to analyze a company’s existing data and update it to reflect growth and other specific efforts. Heat maps visually appeal to team members and clients of the business or company.
Websites: There are many different ways heat maps are used within websites to determine a visiting users actions. Typically, there are multiple heat maps used together to determine insight to a website on what are the best and worst performing elements on the page. Some specific heat maps used for website analysis are listed below.
* Mouse Tracking: Mouse tracking heat maps or hover maps, are used to visualize where the user of the site hovers their cursor.
* Eye tracking: Eye tracking heat maps measure the eye position of the website's users and gathers measurements such as eye fixation volume, eye fixation duration, and areas of interest.
* Click Tracking: Click tracking heat maps or touch maps, are similar to mouse tracking heat maps, but instead of hover actions, these types of heat maps help visualize the users click actions. Click tracking heat maps not only allow for visual cues on clickable components on a webpage, such as buttons or dropdown menus, but these heat maps also allow for tracking on non-clickable objects anywhere on the page.
* AI-Generation Attention: AI-generated attention heat maps help visualize where the visiting user’s attention will go on a certain section of a webpage. These types of heat maps are implemented using a created software algorithm to determine and predict the attention actions of the user.
* Scroll Tracking: Scroll tracking heat maps are used to represent the scrolling behavior of the website’s users. This helps produce visual cues to what section on the website the user spends the most time at.
Exploratory Data Analysis
In statistics, exploratory data analysis (EDA) is an approach of analyzing data sets to summarize their main characteristics, often using statistical graphics and other data visualization methods. A statistical model can be used or not, but pr ...
: Working with small and large data sets, data scientists and data analysts look at and determine essential relationships and characteristics amongst different points in a data set as well as features of those data points. Data scientists and analysts work with a team of others in different professions. The use of heat maps make for a visually easy way to summarize findings and main components. There are other ways to represent data, however heat maps can visualize these data points and their relationships in a high dimensional space without becoming too compact and visually unappealing. Heat maps in data analysis, allow for specific variables of rows and/or columns on the axes and even on the diagonal.
* Biology: In the biological field, heat maps are used to visually represent large and small sets of data. The focus is towards patterns and similarities in DNA, RNA, gene expression, etc. Working with these sets of data, data scientists in
bioinformatics
Bioinformatics () is an interdisciplinary field that develops methods and software tools for understanding biological data, in particular when the data sets are large and complex. As an interdisciplinary field of science, bioinformatics combi ...
, focus on different concepts, some of which being community detection, association and correlation, and the concept of centrality, where heat maps are a compelling way to visually summarize results and to share amongst other professions not in the field of biology or bioinformatics. The two heat maps to the right, labeled “Data Analysis Heat Map Example,” show different ways in which one may present genomic data over a specific region (Hist1 region) to someone outside the field of biology so they have a better understanding of the general concept a biologist or data scientist are trying to present.
Financial Analysis
Financial analysis (also known as financial statement analysis, accounting analysis, or analysis of finance) refers to an assessment of the viability, stability, and profitability of a business, sub-business or project.
It is performed by profes ...
: The values of different product and assets fluctuate both rapidly and/or gradually over time. The need to log changes to the daily markets is imperative. It allows for the ability to draw predictions from patterns while being able to revisit past numerical data. Heat maps are able to remove the tedious process and enable the user to visualize data points and compare amongst the different performers.
Geographical
Geography (from Greek: , ''geographia''. Combination of Greek words ‘Geo’ (The Earth) and ‘Graphien’ (to describe), literally "earth description") is a field of science devoted to the study of the lands, features, inhabitants, and ...
Visualization: Heat maps are used to visualize and display a geographic distribution of data. Heat maps represent different densities of data points on a geographical map to help users see the intensities of certain phenomena and to show items of most or least importance. Usually, heat maps used in geographical visualization are mistaken for
Choropleth map
A choropleth map () is a type of statistical thematic map that uses pseudocolor, i.e., color corresponding with an aggregate summary of a geographic characteristic within spatial enumeration units, such as population density or per-capita inc ...
s, but the difference comes with how certain data is presented which differentiate the two.
Sports: Heat maps can be used in many sports and can influence manager’s and/or coaches decisions based on high and low densities of data displayed. Users can identify patterns within the game, the strategies of opponents and one’s own team, make more informed decisions benefitting the player, team, and business, and can enhance performance in different areas by identifying enhancement is needed. Heat maps also visualize comparisons and relationships amongst different teams in the same sport or between different sports all together.
Color schemes
Many different
color scheme
In color theory, a color scheme is the choice of colors used in various artistic and design contexts. For example, the "Achromatic" use of a white background with black text is an example of a basic and commonly default color scheme in web de ...
s can be used to illustrate the heat map, with perceptual advantages and disadvantages for each. Choosing a good color scheme is integral to accurately and effectively displaying data, whereas a poor color scheme can lead viewers to inaccurate conclusions or exclude those with color deficiencies from proper analysis of said data.
Rainbow color maps are a common choice, as
humans can perceive more shades of color than they can of gray, and this would purportedly increase the amount of detail perceivable in the image. However, this is heavily discouraged in the scientific community for a number of reasons. Possibly the largest reason is that when there is a large number of colors involved, the visualization may give off the impression that there exist gradients in the data that are not really present. The more colors used in a visualization the more values begin to bleed together and color lacks the natural perceptual ordering found in
grayscale
In digital photography, computer-generated imagery, and colorimetry, a grayscale image is one in which the value of each pixel is a single sample representing only an ''amount'' of light; that is, it carries only intensity information. Graysca ...
or
blackbody spectrum
A black body or blackbody is an idealized physical body that absorbs all incident electromagnetic radiation, regardless of frequency or angle of incidence. The name "black body" is given because it absorbs all colors of light. A black body ...
colormaps. Additionally, values represented by different shades of the same color can imply that the values are related when they are not.
An important consideration when choosing a color scheme is whether or not the data will be viewed by anyone with any form of color deficiency. If the audience contains individuals with any form of
color blindness
Color blindness or color vision deficiency (CVD) is the decreased ability to color vision, see color or differences in color. It can impair tasks such as selecting ripe fruit, choosing clothing, and reading traffic lights. Color blindness may ...
, it may be wise to avoid color schemes with prominent reds and greens or uneven color gradients.
![Average Temperature In The Southern Rockies](https://upload.wikimedia.org/wikipedia/commons/d/d5/Average_Temperature_In_The_Southern_Rockies.png)
In addition to audience considerations, it is also important to consider the form in which the data will be viewed. For example, if the data is to be printed in black and white or projected onto a large screen, it may be wise to adjust one's choice in color scheme. Common colormaps (like the "jet" colormap used as the default in many visualization software packages) have uncontrolled changes in luminance that prevent meaningful conversion to grayscale for display or
printing
Printing is a process for mass reproducing text and images using a master form or template. The earliest non-paper products involving printing include cylinder seals and objects such as the Cyrus Cylinder and the Cylinders of Nabonidus. The ea ...
. This also distracts from the actual data, arbitrarily making yellow and cyan regions appear more prominent than the regions of the data that are actually most important.
Software implementations
Several heat map software implementations are freely available:
![Heat map - Normalized Linkage Disequilibrium of Genomic Windows](https://upload.wikimedia.org/wikipedia/commons/2/2b/Heat_map_-_Normalized_Linkage_Disequilibrium_of_Genomic_Windows.png)
*
R, a free software environment for statistical computing and graphics, contains several functions to trace heat maps,
*
Gnuplot
gnuplot is a command-line and GUI program that can generate two- and three-dimensional plots of functions, data, and data fits. The program runs on all major computers and operating systems (Linux, Unix, Microsoft Windows, macOS, FreeDOS, an ...
, a universal and free command-line plotting program, can trace 2D and 3D heat maps.
*
Google Fusion Tables
Google Fusion Tables was a web service provided by Google for data management. Fusion tables can be used for gathering, visualising and sharing data tables. Data are stored in multiple tables that Internet users can view and download.
The web s ...
can generate a heat map from a
Google Sheets
Google Sheets is a spreadsheet program included as part of the free, web-based Google Docs Editors suite offered by Google. The service also includes: Google Docs, Google Slides, Google Drawings, Google Forms, Google Sites and Google Keep. Google ...
spreadsheet limited to 1000 points of geographic data.
*
Dave Green's 'cubehelix' colour scheme provides resources for a colour scheme that prints as a monotonically increasing greyscale on black and white postscript devices.
*
Openlayers
OpenLayers is an open-source (provided under the 2-clause BSD License) JavaScript library for displaying map data in web browsers as slippy maps. It provides an API for building rich web-based geographic applications similar to Google Maps an ...
3 can render a heat map layer of a selected property of all geographic features in a vector layer.
*
D3.js
D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) sta ...
,
AnyChart and
Highcharts
Highcharts is a software library for charting written in pure JavaScript, first released in 2009. The license is proprietary software, proprietary. It is free for personal/non-commercial uses and paid for commercial applications.
It was cre ...
are
JavaScript libraries A JavaScript library is a library of pre-written JavaScript code that allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.
Libraries
With the expanded demands for JavaScript, an ea ...
for data visualization that provide the ability to create interactive heat map charts, from basic to highly customized, as part of their solutions.
Choropleth maps versus heat maps
Choropleth map
A choropleth map () is a type of statistical thematic map that uses pseudocolor, i.e., color corresponding with an aggregate summary of a geographic characteristic within spatial enumeration units, such as population density or per-capita inc ...
s and heat maps are often used in place of one another incorrectly when referring to data visualized geographically. Both techniques show the proportion of a variable of interest, but the two differ in how the boundaries for the variable’s data aggregations are constructed. If the data were collected and aggregated using irregular boundaries, such as administrative units, then a heat map displaying that data will be the same as a choropleth map, encouraging confusion about the how the two differ.
Choropleth maps show data grouped by geographic boundaries like countries, states, provinces or even floodplains. Each region has a singular value, visualized by color intensity, shading or pattern. The figure on the right displaying a choropleth map showing the United States' population density by state may be used as an example. The figure illustrates a singular value (population) denoted by blue color intensity proportionate to the state's value relative to all other states' values, bounded by each state's border.
Similarly, heat maps may also visualize data over a geographic region. However, unlike choropleth maps, heat maps show the proportion of a variable over an arbitrary, but usually small grid size, independent of geographic boundaries.
The figure on the right displaying a heat map of world population is an example. The figure illustrates a single value (population) bounded in an arbitrary grid (square kilometers) with each cell in the grid represented by a color intensity proportionate to the value of the cell relative to all other cells. Some heat maps that are created using approximated regional data may show familiar geographic borders in the visualization where none really exist. The illusion of geographic borders is due to the existence of patterns within the dataset rather than the visualization technique. The figure on the right displaying a heat map of world population also contains this occurrence. Areas in rural parts of the United States and South America may closely resemble familiar geographic borders in those regions.
Examples
File:LakeEffectSnowBuffalo101206.gif, Lake effect snow – weather radar
Weather radar, also called weather surveillance radar (WSR) and Doppler weather radar, is a type of radar used to locate precipitation, calculate its motion, and estimate its type (rain, snow, hail etc.). Modern weather radars are mostly puls ...
information is usually shown using a heat map.
File:Human voice spectrogram.jpg, Human voice visualized with a spectrogram
A spectrogram is a visual representation of the spectrum of frequencies of a signal as it varies with time.
When applied to an audio signal, spectrograms are sometimes called sonographs, voiceprints, or voicegrams. When the data are represen ...
; a heat map representing the magnitude of the STFT
The short-time Fourier transform (STFT), is a Fourier-related transform used to determine the sinusoidal frequency and phase content of local sections of a signal as it changes over time. In practice, the procedure for computing STFTs is to divi ...
. An alternative visualization is the waterfall plot
Waterfall plots are often used to show how two-dimensional phenomena change over time. A three-dimensional ''spectral waterfall plot'' is a plot in which multiple curves of data, typically spectra, are displayed simultaneously. Typically the cu ...
.
File:Scilab exemple 3d.png, Example showing the relationships between a heat map, surface plot, and contour lines
A contour line (also isoline, isopleth, or isarithm) of a function of two variables is a curve along which the function has a constant value, so that the curve joins points of equal value. It is a plane section of the three-dimensional graph ...
of the same data
File:Gamma abs arg.png, Combination of surface plot and heat map, where the surface height represents the amplitude of the function, and the color represents the phase angle.
File:Dartboard heatmap.svg, Score of each contiguous region of a dartboard
Darts or dart-throwing is a competitive sport in which two or more players bare-handedly throw small sharp-pointed missiles known as darts at a round target known as a dartboard.
Points can be scored by hitting specific marked areas of the bo ...
(not to scale)
See also
*
False color
False color (or pseudo color) refers to a group of color rendering methods used to display images in color which were recorded in the visible or non-visible parts of the electromagnetic spectrum. A false-color image is an image that depicts ...
References
Further reading
*
*
*
*
*
*
*
External links
*
* {{cite news , vauthors = Albergotti R , date=May 7, 2014 , title=Strava, Popular With Cyclists and Runners, Wants to Sell Its Data to Urban Planners , work=The Wall Street Journal , url=https://blogs.wsj.com/digits/2014/05/07/strava-popular-with-cyclists-and-runners-wants-to-sell-its-data-to-urban-planners/
Molecular biology
Gene expression
Bioinformatics
Data visualization
Usability
Numerical function drawing
Color scales