WHAT
The chart marker pattern uses charts to enrich aggregated data or to visualize a second attribute of clustered data. Adding tiny charts to the map is a powerful visualization technique to communicate additional aspects of the data.
WHY
It’s easy to symbolize a single observation through color, shape, or size, but as soon as multiple observations are grouped into clusters or aggregated by geography, you are limited to showing values by statistics, such as count, sum, or average. Potentially important insights into the data get lost. For instance, seeing that an area has lots of schools is good to know, but having a pie chart showing how many of those schools are public versus private is even better. Useful chart types include trend lines to indicate change over time, histograms to illustrate distributions, or pie charts to show proportions.
WHEN
The chart marker pattern adds insights to the map beyond the already chosen visualization. You may have chosen cluster markers to group traffic incidents, but only a pie chart marker can show the proportional breakdown of incidents by type.
Another use of chart marker is adding a second value to the data. This allows for displaying multiple topics at the same time instead of mapping a single attribute alone. For instance, show the maximum occupancy of a hotel as a number in the center and the current occupancy as a doughnut chart around it. In that way, it’s easy to see that a hotel has 100 beds and is 90 percent booked.
HOW
Add tiny charts to the map that visually look like markers. Pie, doughnut, and line charts tend to work well since they can be shown in a simple and condensed way without axes or coordinates. Doughnut charts have the additional benefit that you can add a number to the center to show the totals. If the chart markers are based on cluster marker, the charts will update as the user pans or zooms the map according to the cluster algorithm in use.
Add hover effects to show additional information about the chart, such as data for each slice of a pie. Click events can be used to invoke an info pop-up that shows additional details, such as the breakdown of the individual features that make up the chart.
Follow general best practices for chart creation. Pie or doughnut charts, for instance, should start their slices at “12 o’clock” and use few categories and well-distinguishable color palettes. As with choropleth maps, displaying a legend is important to understand the meaning of the chart.
If the charts show data that belongs to a fixed geometry, such as a county or zip code, consider using scale dependency to disable the chart markers at smaller scales to avoid overlap or switch to larger geometries as input for the charts.
EXAMPLE
The CovidPulse app takes a novel approach to visualizing reported coronavirus disease 2019 (COVID-19) cases and deaths. Although most COVID-19 dashboards show daily snapshots of new case counts with the all-too-familiar red graduated circles, CovidPulse uses chart markers in the form of sparklines to visualize trends over time and across counties. Sparkline is a term coined by Edward Tufte, who described them as “data-intense, design-simple, word-sized graphics” to show the variation in measurements — in this case, variation in COVID-19 infection counts. The map shows negative trend lines in red and positive trend lines in green. MapTips reveal additional indicators, and an info panel docked at the bottom provides more detailed charts. As the user zooms out to the national level, the app starts to use state data as the input data to avoid crowded and overlapping charts.
MORE EXAMPLES
