Cluster marker

WHAT

The cluster marker pattern is a common method to avoid visual clutter by grouping points together, and many apps that display point data benefit from this pattern. Cluster marker differentiates overlapping features that are difficult to distinguish and interact with.

WHY

Data layers can have any number of point features, and it is almost inevitable that features that are nicely dispersed at large scales become denser and start to overlap as the user zooms out to smaller scales. Ways to avoid this congestion are to reduce the number of markers, use smaller symbols, or limit the zoom level, but often these approaches aren’t the right solution for a variety of reasons. Clustering the markers into groups is useful for cutting down on the visual clutter and informing users that large volumes of points were grouped together. These groups, or bubbles, are created based on screen distance from one another. Larger bubbles signify more points, and as the user zooms in, the bubbles become smaller until they are no longer necessary and the individual points become visible.

WHEN

There are two types of cluster markers: the original type that labels the cluster by the number of features it represents and the less common type that exposes aggregated metrics, such as the sum or average of an attribute for the clustered features. Apps that represent the former type usually focus on actual locations, such as events, incidents, or policies. Apps of the latter type are often analytic in nature and allow, for instance, insurance providers to see annual average loss of their policies or real estate agents to see average prices of recent home sales.

HOW

Group individual features that are close to each other into a single point symbol. This is called a cluster and resembles a bubble. Use symbology that is like the original point marker but larger in size. Often the diameter of the cluster marker increases proportionally to the number of markers it represents, indicating its magnitude. Cluster markers are usually circular with a number inside so remember to ensure sufficient contrast between the label and the circle. All cluster markers must have the same color, even if the individual features that make up the cluster are visualized with different colors based on an attribute.

As the user zooms in, the number of clusters decreases, and individual markers start to appear instead. Zooming out has the opposite effect, and markers are consolidated into cluster markers again. Consider adding animations that show how points are being added to or removed from the clusters. If the user is zoomed into the lowest zoom level and markers are still clustered, maybe because the points are on top of each other, you may want to provide a way to explode or “spider” the cluster marker where leader lines connect the center with the individual points arranged in a circle around it.

Hovering the pointer over a cluster marker symbol will outline the area — the bounds — used to consolidate the features. Clicking a cluster marker symbol should zoom to the bounds of the cluster. Alternatively, an info pop-up with details or summary statistics on that cluster can be displayed.

Different algorithms exist to calculate clusters. The most common algorithm calculates counts based on distance from each other, which results in a balanced distribution. Predefined grids work well, too, if the cluster marker is positioned based on the average relative distances of the markers within each cell. Avoid using geographic boundaries such as states to create the clusters. If you want to visualize counts by geography, use choropleth map visualization instead.

EXAMPLE

What does “home” mean to you? This question is deeply emotional and has a different meaning for each one of us. It is almost always connected to a very special place, and that’s exactly what the Out of Eden Walk HomeStories app is trying to highlight. Thousands of people from all over the world have used this app to upload a photo together with a short description of the place that feels like home to them. Over time, the app has become a kaleidoscope of life stories. Every story is represented by a dot on the map. Showing individual dots works well at large scales, but at smaller scales, the points overlap quickly. To avoid this undesired behavior, the app uses cluster marker to aggregate overlapping points into bubbles that indicate the number of points within. When a user clicks one of the cluster markers, the app assumes that their intent was to see stories for that region and zooms to that area. In many cases, individual points start showing up, or else a second click on another cluster is needed to zoom in even further. The list of stories in the left panel updates to show only relevant stories visible in the current extent (see extent-driven content), and clicking a story card toggles to the details of that story (see list and details).