Understanding the Heat Map

Popularized in the mashup era, heat maps show the density of point features with a yellow-orange-red color continuum. Figure 1 shows an example of a heat map depicting the prevalence of tornadoes. Google’s Geo Developers Blog describes these maps as a representation of “geospatial data on a map by using different colors to represent areas with different concentrations of points — showing overall shape and concentration trends” (Yeap and Uy 2014).

The term “heat map” is not universally used within the GIS world. Yeap and Uy (2014) mention that they are generally known as “intensity maps.” Esri’s (2012) ArcGIS documentation refers to this type of map as a “point density interpolation” that is useful for purposes such as “finding density of houses, crime reports, or roads or utility lines influencing a town or wildlife habitat.” While “point density interpolation” is a valid term for this method, “heat map” is more frequently used and understood. For example, QGIS, an open source GIS program, has a module for the production of “heatmaps.”

Heat maps take noncontiguous point data and display them as being continuous. This method is not appropriate for all data. While mapping elevation or temperature as a continuous surface would make sense, mapping data that do not vary continuously over space may not. Additionally, having too few points upon which to base the surface will typically lead to larger errors.

The term “heat map” has been used in statistical analysis for many years. Figure 2 shows a “cluster heat map,” a statistical matrix used to show correlation between different variables. Dziuda (2010) defines this method of visualization as “a graphical representation of data where the individual values contained in a matrix are represented as colors.” Wilkinson (2009) finds “the earliest sources of this display in late 19^th century publications,” and calls them the “most widely used of all bioinformatics displays.” Eventually, this form of statistical analysis transitioned into the creation of cartographic heat maps.

Heat maps were so named because of their color schemes, which move from yellow, to orange, then to red as values increase, giving the appearance of getting “hotter.” The term heat map is sometimes erroneously applied to other types of maps, particularly choropleth maps (see Figure 3), which could be mistaken for heat maps due to their frequent use of similar colors.

MAKING HEAT MAPS

Heat maps show the density of points in an area as a raster. They are formed by creating a distance buffer around each point in a data set. Once the radius distance has been chosen, the circles are placed on the map; the raster shows the number of overlapping circles in each cell (Figure 4). Increases in the number of overlapping of circles will return a higher density and color the map accordingly. In an interactive map, the buffer can be defined by the user and manipulated to show more or less overlap.

The Google Maps developer’s page (www.developers.google.com/maps) includes code to create a heat map from point data. In Figure 5, the example map shows taxi pick-up locations in San Francisco. The pick-up locations have been geocoded from street addresses to determine their latitude and longitude. These points are then given a radius defined within the code (see Example 1). The overlapping radii create the higher density and give each area a color value. The user changes the radius within the map by choosing one of the buttons on the top of the map. The code that produces this map is shown in Example 1.

// Adding 500 Data Points
var map, pointarray, heatmap;

var taxiData=[							// setting the points using LatLng
	new google.maps.LatLng(37.761344,-122.406215),
	new google.maps.LatLng(37.760556,-122.406495),
	new google.maps.LatLng(37.759732,-122.406484),
	new google.maps.LatLng(37.758910,-122.406228),
	new google.maps.LatLng(37.758182,-122.405695),
	new google.maps.LatLng(37.757676,-122.405118),
	new google.maps.LatLng(37.757039,-122.404346),	// lat/long points
	new google.maps.LatLng(37.756335,-122.403719),
	new google.maps.LatLng(37.755503,-122.403406),
	new google.maps.LatLng(37.754665,-122.403172),
	new google.maps.LatLng(37.759732,-122.403112),
	new google.maps.LatLng(37.751266,-122.403355),
];
function initialize(){ 					// defining options for the map
	var mapOptions={
	zoom: 13,						// setting zoom for the map
	center: new google.maps.latlng(37.774546, -122.433523),	// creating a center for the map
	maptypeid:google.maps.maptypeid.SATELLITE		// defining the type of map (satellite)
	
	};
map = new google.maps.Map(document.getElementById('map-canvas'),	// calling google map
      mapOptions);

var pointArray = new google.maps.MVCArray(taxiData);	// calling the taxiData to create the points

heatmap = new google.maps.visualization.HeatmapLayer({
	data:pointArray					// turning the array into the heat map layer
	});
heatmap.setMap(map);						// setting the heat map on the map
}
function toggleHeatmap(){
	heatmap.setMap(heatmap.getMap() ? null:map);
}
function changeGradient(){					// sets the colors for the heat map
	var gradient = [					// rgba colors for the gradient
	'rgba(0,255,255,0)','rgba(0,255,255,1)','rgba(0,191,255,1)','rgba(0,127,255,1)',
	'rgba(0,63,255,1)','rgba(0,0,223,1)','rgba(0,0,191,1)','rgba(0,0,159,1)',
	'rgba(0,0,127,1)','rgba(63,0,91,1)','rgba(191,0,31,1)','rgba(255,0,0,1)',
	]
	heatmap.set('gradient',heatmap.get('gradient')?null:gradient;
}
function changeRadius(){						// defines the radius of the points
	heatmap.set('radius',heatmap.get('radius')?null:20;	// setting the radius at 20 units
}
function changeOpacity(){						// setting the opacity of radii
	heatmap.set('opacity',heatmap.get('opacity')?null:0.2;	// setting opacity to 20%
}
google.maps.event.addDomListener(window,'load',initialize);

Example 1. Basic HTML5 boiler plate (in: index.html).

HEAT MAP VARIABLES

Examining the Google Maps API code, you can see the function changeRadius that defines the radius of the matrix is 20 units. However, when zooming in and out within the Google heat map, the actual unit of measure changes with the zoom level. Figure 6 shows the same San Francisco taxi pick-up locations at three different zoom levels. One can clearly see how the changing unit creates different representations of the same data at each map scale.

MISLEADING OVERLAPS

A possible problem of using overlapping circles is that a high density may be indicated where there are actually few points, as seen in Figure 7.

Figure 8 shows an example heat map of golf courses the state of South Carolina. We see that the method does not accurately represent the density of points. Notice that there are areas where the heat map indicates a high concentration of golf courses, but there are no data points. This area has received a higher value because of the overlap of the circles centered on nearby points. This problem is particularly common when non-continuous data are being used to create a heat map.

Identifying this problem is difficult without seeing the points, and so placing the point data on a layer above the heat map helps prevent misleading the map user. Reducing the circle radius also reduces the frequency of this problem.

CONCLUSION

This article highlights the practical uses as well as the disadvantages of heat mapping. Along with desktop GIS software, there are also online methods for creating heat maps. The advantage of heat maps is that the mapped distribution is easily interpreted. These maps can be visually stimulating and users are able to make quick comparisons. As a visual tool, heat maps can be very powerful but the mapping method can be problematic. Although these maps show valuable information, there is often no indication of how the values are determined, and the method of determining values may create high values in areas that have no points. While heat maps may be visually stimulating, the representation may be incorrect and misleading. The technique should be used with caution, and only when the underlying points can also be displayed.

REFERENCES

Benucci, Gian Maria Niccolò, Lorenzo Raggi, Emidio Albertini, Tine Grebenc, Mattia Bencivenga, Mario Falcinelli, and Gabriella Di Massimo. 2011. "Ectomycorrhizal Communities in a Productive Tuber Aestivum Vittad. Orchard: Composition, Host Influence and Species Replacement." FEMS Microbiology Ecology 76: 170–84. doi: 10.1111/j.1574-6941.2010.01039.x.

Dziuda, Darius M. 2010. Data Mining for Genomics and Proteomics: Analysis of Gene and Protein Expression Data. Hoboken, NJ: Wiley. doi: 10.1002/9780470593417.

Wilkinson, Leland. 2009. “The History of the Cluster Heat Map.” The American Statistician 63(2): 179–84. doi: 10.1198/tas.2009.0033.