15

I'm looking for the best symbol to display clustered features in the ArcGIS Server JS API.

I don't like the "fly-out" animated cluster symbol, as used in the Silverlight API clustering or the JS clustering sample (they feel a bit gimmicky).

So far the best option I've found is the Google Maps marker clusterer symbol.

I won't be showing a number in the centre of the cluster symbol, but will be varying the size of the symbol to show concentrations of features, as in this mockup:

enter image description here

What other clustering symbol options are there? Can you point me to a map showing a nice implementation of marker clustering?

PolyGeo
  • 65,136
  • 29
  • 109
  • 338
Stephen Lead
  • 21,119
  • 17
  • 113
  • 240
  • Are you limited to a point symbol? – Andy W Sep 22 '11 at 02:07
  • @AndyW I'm displaying point features, but I'm not necessarily restricted to a point symbol. The sample image above uses Picture Marker Symbols if that helps. – Stephen Lead Sep 22 '11 at 03:09
  • The varied replies suggest that some additional clarification would help; specifically, in what sense do you mean "best symbol"? It probably depends on the application and audience and plausibly could mean "prettiest," "easiest to implement," "easiest for viewers to recognize and discriminate," or "allowing for the most accurate quantitative assessment." The best solutions in these senses might be heatmaps, Google or Bing markers, who knows, and sunflower plots, respectively, but most of these solutions are equally poor in other respects. – whuber Sep 22 '11 at 15:23
  • @whuber "Easiest for non-expert users to understand what's happening without instruction" is the objective. The precise locations of the features isn't as important as the fact that some features are "single points" and some are "clustered points". Is it obvious that there are more features in some locations, and fewer features in other areas? The above map works for me, but is that the case for everyone, and is it the best possible solution? thanks – Stephen Lead Sep 22 '11 at 23:22
  • 1
    Without a legend, I cannot make sense of your example. Even knowing its intention, I cannot read it with any sense of accuracy because I have no idea what the relationship is between symbol size and cluster size (is it the circle diameter, the circle area, or something else?) What is the blue/red distinction trying to convey? If you want to avoid instruction, you need to use the most cognitively effective methods to make distinctions and convey quantities that are known (such as using lightness, rather than hue, to convey intensity of a quantity), and be prepared for misunderstandings anyway. – whuber Sep 22 '11 at 23:27
  • @whuber this approach might be the simplest solution to my problem... – Stephen Lead Sep 26 '11 at 23:14
  • Without a legend, that map has inherent ambiguities. I can't be confident in any of my (many different) guesses as to what it's really showing. Cartographically, it's strange that it uses symbols of a constant size and intensity to show what appear to be different numbers (71, 64, 31), whatever they may be representing. There's a decent Lie Factor in that. Differences in text size and color, as well as color and filling of tiny circles, also seem to try to tell us something, but it's impossible to tell what. "Simple" = "useless"? – whuber Sep 27 '11 at 04:02

3 Answers3

10

In traditional cartography, marker clustering is called aggregation or sometimes amalgamation. It is part of model generalization: When zooming out, some detailed concepts (e.g. the tree) disappear to be replaced by less detailed aggregated forms (e.g. the forest).

Many good examples can be found in good cartography books. Here are two examples from this book on building aggregation:

enter image description here

enter image description here

enter link description here http://www.ailleursloin.free.fr/A/depot/village_generalise_200k_sans_bati.jpg

I suppose you are looking for more operational methods to do it automatically. This presentation provides an overview of the existing automatic methods. You may have resources to develop some of the algorithms shown... Otherwise, you can found a java implementation of this algorithm (which allow to build the envelop of distant symbols) there, and also of this algorithm there.

Heat maps are also quite a good alternative for this issue. See there an implementation. See also maptimize.

enter image description here

julien
  • 10,186
  • 6
  • 55
  • 93
  • 1
    Thanks for the detailed response. I'm actually pretty happy with the actual algorithm I'm using - a modification of this sample script - so I'm more concerned with the symbology or representation of the clustered features. I like the heatmap approach, but there aren't enough points in my case since the features are not especially dense. Thanks again – Stephen Lead Sep 22 '11 at 23:26
  • Could you update the broken links please? – phil294 Feb 01 '17 at 01:08
7

There's a lot of options and in fact I struggled through the same question a while back on some of my applications. And for our different products we ended up with different solutions. So you have to ask yourself

  1. Are all of the singleton icons on the map of the same "kind" - same shape and color?
  2. If they're not, do they all live on 1 layer, or multiple layers?
  3. If on multiple, are you going to cluster each individual layer, or cross-layer clustering?
  4. If clustering individual layers, what if icons overlap across layers, are you going to have cluster of clusters?
  5. Do you need to know "what" type of thing is being clustered, or just that "hey, there is A cluster" on the map. And above you said you don't need to know how many of the items are there just by looking at cluster icon.

Here's a couple of examples and what they mean and how they're done. All are done with a custom clustering algorithm, not with the Bing clustering (1st image) or OL Clustering strategy (2nd). This way I have a lot more control over the look and feel.

Transparent cluster marker

Screen cap from a Bing app; we have multiple layers of different icon types and colors. We chose to cluster the icons, then hide all by the top-most (most-important) icon in the cluster, and then the top-most icon is overlaid with a transparent-ish image. So say my icons are 20x20, the cluster indicator is a 30x30 image that's 80% transparent except it has a PLUS on the upper right. So when overlaid on top of my cluster "representative" icon, it looks like I have a cluster of things underneath. When user hovers or clicks, the event goes to the cluster icon and they get a message "N number of clustered items" and can click or drill down for more info.

enter image description here

In this situation we took a simpler approach. Icons still live on different layers and have different meaning and we cluster cross-layer, however the representative icon is just a big fat PLUS sign [that varies in size up to a certain limit].

So basically, we chose a "PLUS" "+" to indicate a cluster in both apps, but took different routes on how to put it on the map - overlay existing map icons to give the map more meaning, or just clean up the map and put a PLUS and let the user drill-down for more info.

Vadim
  • 3,971
  • 2
  • 29
  • 42
  • thanks for the detailed reply. In this case all features are in the same layer, but you raise some interesting points in cases where they're not. The + approach is an interesting one – Stephen Lead Sep 22 '11 at 03:13
5

You might obtain some inspiration from sunflower plots. This method, which has been in use for decades to represent clusters of points on scatterplots, capitalizes on research in visual cognition to produce markers that are rapidly and correctly discriminated as well as clearly related to the sizes of the clusters they represent.

Here's an example done in R:

enter image description here

It takes little imagination to see how the technique could be applied to making maps that are more general than scatterplots.

whuber
  • 69,783
  • 15
  • 186
  • 281
  • Bill, thanks for the tip - the sunflower plot is very cool, and works well in the scatterplot. It's not really suitable for my case since the site is aimed at novice users and this would be overkill. (PS The heatmap approach taken by Fusion Tables might also work on the scatterplot? http://geochalkboard.files.wordpress.com/2010/03/fusion2.png) – Stephen Lead Sep 22 '11 at 06:55
  • 1
    @Stephen Color gradations tend not to work as well for reading graphics quantitatively (i.e., accurately and rapidly). For about 6% of the population, a graduation from red to green (as shown in the example) is hard to discern. A growing body of literature in visualization of quantitative data suggests we should not be quick to limit the quality of our graphics on the supposition that novice users will not be able to appreciate or use them. Read Tufte, Cleveland, or Wainer, for instance. – whuber Sep 22 '11 at 07:13