v0.9.2

Charts

The outlined principles and elements are implemented in a flexible, easy-to-use chart component library.

By complementing generic, robust and widely applicable core charts with a domain-specific set of specialized charts, the system provides custom solutions for the most common data semantics in the domain of public health data.

Header image for Chart section, showing a variety of different chart types
Generic, flexible chart components

Core charts

Core charts include maps, tables, line and bar charts. With this chart set, we cover a wide variety of datasets and contexts. Time, geographical information, numeric, categorical and ordinal data can be shown using these general techniques in an accessible and widely familiar way.

Factoid
Factoids show a combination of indicator title, large number, and geo-focus. They provide a clear and accessible way to highlight individual key insights or single comparisons and work well in combination with other charts.
Text
Data-generated text is widely accessible, unambiguous, and easy to reproduce. It can work as a standalone data presentation for individual facts, or as a fallback/alternative to more complex charts. It works particularly well on small screens or in combination with other charts.
Table
Tables allow to show several data dimensions at once. We enhance our data tables with visual informations in the form of bars or sparklines to provide access to information at a glance. We further support search and sorting to make large quantities of information easily explorable.
Column Chart
Column charts show data as a series of vertical bars. They can be used for example for comparing countries or time points and are most suitable for datasets with a limited number of entities.
Line Chart
Line charts connect a series of time points with a continuous line. They are particularly well-suited for showing time series data with many time points. We offer line charts showing multiple time-series in one chart as well as a line chart grid, with each chart showing one time-series.
Map
Maps show geographical data distributions. They are most suited for datasets that contain multiple countries or regions and work best in larger resolutions. We offer different map representations for rates and counts. Disputed areas are represented appropriately and according to WHO guidelines.
Domain-specific chart types

Special charts

Special charts enhance our set of core options. While these charts are not as widely applicable, they are better suited in specific contexts. For instance, while demographic breakdowns could be shown as a core bar chart, population pyramids are specifically suited for this data and thus work best.

Example image for special charts section, showing a beeswarm plot, population pyramid and a scatter plot.
Which chart is best suited?

Chart Choosing

There is no one chart that fits all situations. Our design system provides guidance for data editors to pick the most suitable chart.

The process is based on picking data dimensions, information focus and usage context (including container size, channel, and medium). These editorial choices narrows down the applicable set of chart types and makes it possible to suggest an ideal solution.

Example image for chart choosing section, showing design alternatives for the same underlying data set