We're about to embark on a small project that requires us to plot various data on a map. Some examples that we need to put on the map:

  1. Population
  2. Income
  3. House Prices
  4. Crime
  5. Etc

Examples 1-3 could be individually plotted using a heat map. However, what if we wanted to show all 3 data simultaneously? We can't have a heat map on top of a heat map, can we?

And what about plotting something like crime? That's not something that would work well as a heat map, right? Crime might be classified as "petty crime" and "violent crime" for a given location. We don't think of those classification as a graduation that can be put in a heat map.

Any suggestions (or examples) on how to effectively display complex data on a map?

  • 1
    That's a lot of data to put on just one map. Is there a reason you need all of it at once? What is preventing you from doing separate maps?
    – BDD
    Dec 14, 2015 at 13:15
  • Chernoff faces maybe? Dec 14, 2015 at 21:05

4 Answers 4


Examples 1-3 could be individually plotted using a heat map.

Yes, it may be reasonable if you have high resolution data. In this representation heat map is an invaluable tool (besides opinable choice of color pair):

Heat map with high res data - 1

However if you do not have high resolution data then an heat map is not the only available solution. Take for example this low-res map:

Heat map with low res data - 1

Which alternatives you have? For low-res data you can use other charts overlaid on map:

Low res data with bubbles

Watch as this simple chart conveys three information: location, Internet users and share of world population. You may (should) even transform those bubbles in an area chart (!) or - better - a bar chart to compare individually those two values.

If you use bubbles please also provide numbers, human beings are not good to compare areas and angles. Do you need a proof? In this (I admit widely abused) image:

apple "faked" chart

Try to compare 19.5% slice with 21.2% slice. Which one seems bigger? That example is voluntary faked (more crude words: it honestly lies) but it introduces the point: do not represent data using areas, angles and 3D unless absolutely necessary (and probably 3D is never necessary).

However, what if we wanted to show all 3 data simultaneously?

You may use a bi-variate map but unless you're producing charts just for advertising and not for real usage then I wouldn't do that. Do you want an example of bad approach? Let's enjoy this:

Bad multivariate map

It looks full of useful data but it's actually useless because you can't read it. Human beings eyes are not bad just to compare areas but also to distinguishing color shades; combining them is even worse (I do not even mention people with color blindness, 5~10% of male population). Heat maps are seldom a good solution (alone) for this kind of analysis.

You can pick last bubble graph and transform it into a column/bar chart (background map may even be simplified, as required):

Multiple data on map

Note that each chart in the grid may be an heat map and you can build a grid (often called Trellis chart or small multiple) for comparison:

Trellis chart example

AFAIK this kind of representation has been formalized (but it was in use even before, see next paragraphs) by Edward Tufte1:

At the heart of quantitative reasoning is a single question: Compared to what? Small multiple designs, multivariate and data bountiful, answer directly by visually enforcing comparisons of changes, of the differences among objects, of the scope of alternatives. For a wide range of problems in data presentation, small multiples are the best design solution.

What to do if you have a huge amount of data to compare?

Multiple 1


Multiple 2

These kind of data representation is, for example, widely used in EEG to compare multiple related variables and it's often called cartooning and it may convey an huge amount of information (please ignore this bad example of kNN color interpolation, I guess they had to use a better kernel smoother or - at least - another distance function):

EEG cartooning

You should not add too much information on the same chart because it will make it harder to read. Each chart should tell one story, anything not immediately necessary should be left out ("A sentence should contain no unnecessary words ... for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts"2)

Charts are an invaluable tool for data analysis but they must be effective and not (only) attractive. Information should be (easily) available when required. In your case (without more context about your users and kind of analysis they need to perform) I would use this setup (strip each feature is unnecessary in your case):

  • One heat map where you visualize only one component (population, income, houses prices and so on) at time. No multivariate display for heat maps (IMO).
  • One separate map (that may be tiled to heat map or replace it) to compare multiple components. Here you use bar charts.
  • Possibility to switch between map view and tabular view (example taken from on-line demo of Tableau):

Tableau example - rearranged data

  • When you present tabular data do not ever forget to sort them according to story you want to tell (or, at least, an arbitrary but reasonable order). Do not forget users may want to change this order (also dragging & dropping rows to easy comparison).
  • If applicable for each visualization method you should have a slider (or equivalent control) to narrow time range.
  • Multiple checkboxes (or equivalent control) to include/exclude each serie in comparison.
  • If crime is categorized then you may provide a grouping feature to sum them all or to split them (in comparison charts).
  • Basic interaction: pan & zoom but also selection and details view: if I have to analyze such data I would click one series in comparison chart and see it in heat map (if tiled). I may also want to pin one heat map to manually build a Trellis chart for single components I want to compare.
  • Eventually I may need ability to apply some post-processing. For example I may want to normalize ([0...1] or [0...100%] scale) population and house prices and then combine them to calculate some sort of maps correlation or some spatial statistical analysis (you may want to read The Knox Method and Other Tests for Space-Time Interaction3 and Mantel test).

Note that a human-eyes-aided-visual-correlation may be simply done in this way:

  • Make each map monochrome (use one single color).
  • Make it transparent (let's say 25%).
  • Overlay two (or more) of them.
  • Give user ability to change transparency, color and visibility of each map.

Users will see correlations by combined intensity! It's easy and really effective, not much different from same technique already applied to dense scatter plots. Let's take a look, for example, to Image Overlay Using Transparency in MATLAB.

1Edward Tufte. Envisioning information. Graphics Press Cheshire, CT, USA ©1990. ISBN:0-9613921-1-8.

2 William Strunk Jr. Elements of Style. Ithaca, N.Y.: Priv. print. [Geneva, N.Y.: Press of W. F. Humphrey], ©1918. ISBN:1-58734-060-7.

3 Martin Kulldorff, Ulf Hjalmars. The Knox Method and Other Tests for Space-Time Interaction. Biometrics, ©1999.

  • 1
    I'm very impressed by this answer! Did you write it just for this occasion? Anyway, many thanks. I found it very stimulating. Dec 14, 2015 at 21:04
  • Just for this answer but unfortunately it's really really vague. I see for each topic much more should be written and some assertions should have explanation. Well, about this tons of books have been written then I don't even try to be exhaustive. If I have time I'll post some nice references for future readers (and if anyone has references or interesting studies I'll be even more happy, I work with data representation and I also like it) Dec 14, 2015 at 21:22

You would want to use multi-variate map to display the same and you don't necessarily need to use colors to define all attributes as you can use symbols also or a combination of both. Here is an example of a bivariate map...

enter image description here

This is also useful: http://indiemapper.com/app/learnmore.php?l=multivariate

  • This chart is a possible solution to relate two variables but few observations about selected chart: human beings are terrible to compare areas. Really. Bubble must have numbers otherwise it's better to drop them (especially when they overlap, partially hide each other and have different backgrounds). This kind of graph is (as-is) nice and eye catching but useless for any data analysis purpose. Dec 14, 2015 at 14:42
  • Yes, I do understand that comparing area can be difficult unless you're using treemap like jqueryscript.net/images/… but isn't it still better than comparing intensity of color? So, my point is, it serves the purpose here, not saying there can't be a better way... and, this is an example, so StackOverflowNewbie should use a better symbol if not just colors... Dec 14, 2015 at 14:50
  • This is actually good, even though it's a solution for two variables.
    – Zoe K
    Jan 15, 2016 at 11:04

You could do two using this technique --> https://en.wikipedia.org/wiki/Bivariate_map https://flowingdata.com/2015/03/13/bivariate-choropleth-how-to/

Any more and it'll look like when you mixed all the paint colors as a kid - mostly a grey-brown

For the crime stat, you may have to sub-divide that stat into separate heat maps if it itself has separate sub-categories that mean they can't be merged into one coherent measure (i.e. 10 thefts = 1 armed robbery which doesn't seem a likely course)

Another way is to calculate the statistical relationship between two or more variables the user gets to choose and plot that as just the one heat map

  • what's the negging for apart from playing silly games? If the OP wants to show a clearcut relationship in a heatmap between two variables, calculating a stat between them is the way to go - i.e. crimes / population = crimes per capita, rather than covering it with chart junk as above.
    – mgraham
    Dec 14, 2015 at 14:56
  • Confusing but interesting.
    – Zoe K
    Jan 15, 2016 at 11:06

Cramming 3 variables into the map is really not the best solution — it will most likely not be readable. This being said, it can still be done.

You could combine a bivariate map from Harshit's answer with this, adding a third dimension for one of the variables.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.