How to Make a Geographic Heatmap in 7 easy steps

5 Min Read

What is a Heat Map?

A heat map (usually spelled heatmap) is a graphical representation of data where values are illustrated by color.

Geographic heatmaps (also known as Color maps or Choropleth maps) use a sequential color scheme to provide an easy way to visualize how the measurement data or the statistical data varies across a geographic area, or administrative units.

For this presentation we are going to use the Map Grafica online editor - in the browser. If you would rather make your heatmap programmatically, check out Nathan's solution on

Prepare your data

By far, this is the most difficult step. You will need to find and prepare data in a tabular, two columns format: the division ID and the Value.

We will use US Census data to identify which States have the Oldest Population, and which States have the Youngest Population; and how they are distributed throughout the United States.

After we download the Population estimates by age (18+) data set - 2014, we prepare a tabular format file in MS Excel, and select the two columns of interest.

Worksheet with State data values

Create a map design

I use my Chrome browser to open the editor and locate the US geographic map templates. For our design I chose the Lambert projection - with Alaska and Hawaii moved and resized.
In this template each state is a map Division identified by a Code.
From the "Style" menu, I am going to set a white background, and from the "Canvas" menu I set the map design size to: 1200 x 900 pixels.

Load and validate your data

After we enable the "Data Visualization" feature, we copy the two columns from the spreadsheet and paste the content into the "Data Values" dialog.
Once we click on the "Validate & Use" button, each division on the map will have associated the data value from the spreadsheet. When we enable the "Data Labels" feature, the values are being displayed on the map, along with the division label (State name).

Loading data into Map Grafica online editor

Setup the heatmap design

At this step we choose to visualize the data using coloring, with a sequential color scheme.
The editor has a number of predefined sequential color schemes, based on a linear gradient with one primary color.
Because none of these schemes match the design we had in mind for our storytelling, we'll be creating our own coloring scheme.

Setup a Geographic Heat Map made with Map Grafica online editor

Create a sequential color scheme

We'll build a color scheme based on a linear gradient, that blends colors from one point to another in a straight line.
To define the linear gradient, we start by choosing the start color and the end color.
For our presentation, the start color - light blue - corresponds to the State with the youngest population, while the end color - red - corresponds to the State with the oldest population.
If we want to represent the median values with more distinct color shades, we can choose one or more stop colors between the start and the end.
After trying different colors for our heatmap, I have decided to use a brilliant, light cobalt blue for the median color.

Creating a sequential color scheme with Map Grafica online editor

Set data values range

The editor will try to determine the optimal values range by extracting the minimum and the maximum values, but I will manually adjust the Range values to make the visualization more readable.

Here is a simplified function to calculate the color used to fill a shape, based on its Division data value:

function calculateShapeColor(colorStart, colorEnd, rangeMin, rangeMax, dataValue){

	var ratio = (dataValue - rangeMin)/(rangeMax - rangeMin);
	var R = (colorStart.R + (ratio * (colorEnd.R - colorStart.R)));
	var G = (colorStart.G + (ratio * (colorEnd.G - colorStart.G)));
	var B = (colorStart.B + (ratio * (colorEnd.B - colorStart.B)));
	return Color(R, G, B);

When I extend the Range Min and Max values, the calculated colors will become closer to each other, and reverse - when I limit the Range values, each shape will be painted with a more distinct color.

Creating a Data Values Range with Map Grafica online editor

Add extra features to the map design

Finally, I add a few more features to our design, including a "Legend", and displaying "Data Labels" - the data values - above the State names.

You can edit this heatmap yourself, to see how changing the Sequential Scheme colors and the Range values would affect the design.

Completing a Geographic Heat Map in the online editor

For some interesting insights into why some States might have a larger proportion of residents over age 65, check out Insights.

For more map visualization ideas, check out the data visualization map types on the website.

The sample data
The map JSON source

Dorel Vleju
Dorel Vleju A passionate software developer with an interest in data visualization and AI-based text analytics.