1

I need some advice about how to improve the visualization of cartographic information.

User can select different species and the webmapping app shows its geographical distribution (polygonal degree cells), each specie with a range of color (e.g darker orange color where we find more info, lighter orange where less info).

The problem is when more than one specie overlaps. What I am currently doing is just to calculate the additive color mix of two colors using http://www.xarg.org/project/jquery-color-plugin-xcolor/

As you can see in the image below, the resulting color where two species overlap (mixed blue and yellow) is not intuitive at all.

enter image description here

Someone has any idea or knows similar tools where to get inspiration? for creating the polygons I use d3.js, so if more complex SVG features have to be created I can give a try.

Some ideas I had are...

1) The more data on a polygon, the thicker the border (or each part of the border with its corresponding color)

2) add a label at the center of polygon saying how many species overlap.

3) Divide polygon in different parts, each one with corresponding species color.

thanks in advance, Pere

user1249791
  • 1,241
  • 4
  • 14
  • 33
  • Might be a question for http://gis.stackexchange.com/ ? This is a general cartography question, not really a technical one appropriate to SO. – nrabinowitz Nov 20 '12 at 18:29
  • 1
    yes, possibly it could also fit in gis.stackexchange.com, but I expected someone using d3.js could give also a technical point to a possible solution. I will remove leaflet tag, but please accept this question on this forum. Thanks. – user1249791 Nov 20 '12 at 18:37
  • I wasn't suggesting I'd close it, just that you might get better answers on the GIS site. – nrabinowitz Nov 20 '12 at 19:33

2 Answers2

2

My suggestion is something along the lines of option #3 that you listed, with a twist. Rather painting the entire cell with species colors, place a dot in each cell, one for each species. You can vary the color of each dot in the same way that you currently are: darker for more, ligher for less. This doesn't require you to blend colors, and it will expose more of your map to provide more context to the data. I'd try this approach with the border of the cell and without, and see which one works best.

Your visualization might also benefit from some interactivity. A tooltip providing more detailed information and perhaps a further breakdown of information could be displayed when the user hovers his mouse over each cell.

All of this is very subjective. However one thing's for sure: when you're dealing with multi-dimensional data as you are, the less you project dimensions down onto the same visual/perceptual axis, the better. I've seen some examples of "4-dimensional heatmaps" succeed in doing this (here's an example of visualizing latency on a heatmap, identifying different sources with different colors), but I don't think any attempt's made to combine colors.

seliopou
  • 2,896
  • 20
  • 19
0

My initial thoughts about what you are trying to create (a customized variant of a heat map for a slightly crowded data set, I believe:

One strategy is to employ a formula suggested for

n + 1

with regards to breaks in bin spacing. This causes me some concern regarding how many outliers your set has.

Equally-spaced breaks are ideal for compact data sets without outliers. In many real data sets, especially proteomics data sets, outliers can make this representation less effective.

One suggestion I have would be to consider the idea of adding some filters to your categories if you have not yet. This would allow slimming down the rendered data for faster reading by the user.

another solution would be to use something like (Comprehensive) R or maybe even DanteR

Tutorial in displaying mass spectrometry-based proteomic data using heat maps (Particularly worth noting I felt, was 'Color mapping'.)

Ryan Hell
  • 125
  • 1
  • 9