Helderheid in interactieve staafdiagrammen

fffeed: achtergronden en projecten

Dagelijks komen we ze tegen: infographics die trachten ons op een heldere en attractieve manier duidelijk te maken hoe het zit. Het staafdiagram scoort daarbij hoge ogen: het is een eenvoudige manier om veel gegevens in één oogopslag te ordenen en te duiden. Bij al die helderheid is het opvallend hoeveel aanvullende informatie vaak nodig blijkt om uit te leggen wat er daadwerkelijk te zien is en hoe een en ander gelezen dient te worden.

Staafdiagram van het Office for National Statistics waarin weergegeven is hoe tevreden inwoners van het Verenigd Koninkrijk zijn met hun leven (2015)

Datagraphic "benzinesluipers (gas guzzling)" van Nigel Holmes over toename van oliegebruik in de Verenigde Staten (2011)

Er is natuurlijk niets op tegen om extra informatie aan een grafiek toe te voegen, zeker niet als het om een statische afbeelding gaat (online of op papier). Maar interactieve visualisaties die gebaseerd zijn op live databronnen zijn dynamisch van aard, en je weet van tevoren niet welke aanvullende informatie op welke plek getoond moet worden. Het verhaal van je interactieve visualisatie moet overeind blijven ongeacht de keuzes van degene die de visualisatie bekijkt en gebruikt.

Wat kun je doen om de leesbaarheid en begrijpelijkheid van een staafdiagram te vergroten?

Vergelijk onderstaande grafieken.

Het enige verschil is de waarde van kolom F, die in de grafiek rechts vrijwel niet zichtbaar is. Door de actuele waarde aan elke staaf toe te voegen zie je sneller dat F de waarde 1 heeft.

Maar die remedie heeft een beperkte toepasbaarheid; zie bijvoorbeeld wat er kan gebeuren als de domeinen van x- en y-as in omvang en waarden toenemen en de weergegeven waardes snel minder leesbaar worden:

In interactieve omgevingen zijn er gelukkig meer hulpmiddelen om de lezer te ondersteunen, denk aan een tooltip die de actuele waarde weergeeft.

Ook kleurgebruik speelt een rol: hierboven is te zien dat een andere kleurstelling van de staven het nog lastiger maakt om de lage waarde van staaf M te kunnen onderscheiden. Het is daarbij ook moeilijker om een waarde aan te wijzen met de muis naarmate de waarde kleiner en dus de staaf korter is. En het tonen van een tooltip op een touch-apparaat is al helemaal niet gebruikelijk, al wordt de tooltip in die gevallen vaak zichtbaar na een klik.

Een laatste probleem is het verschil tussen een heel lage waarde en een ontbrekende waarde: stel dat staaf M waarde 0 heeft, dan zie je geen staaf. Maar als er geen data voor M is, en je wilt toch dat M op de x-as blijft staan, wat dan? Zet je een ? in de tooltip, of helemaal niets? Je wilt toch liever direct inzicht, want je verhaal moet overeind blijven.

Met een eenvoudige toevoeging is aan alle genoemde tekortkomingen tegemoet te komen. Geef elke staaf die een waarde vertegenwoordigt een achtergrond, en geef die achtergrond eenzelfde tooltipwaarde als de feitelijke staaf. Zo zie je direct welke waarden aanwezig zijn en kun je via een tooltip of klik eenvoudig achterhalen om welke waarden het gaat.

En een voorbeeld met deze toepassing van de achtergrond van een staaf:

Staafdiagram met achtergrond in interactieve datavisualisatie over energiecentrales in Europa. In opdracht van Europese Commissie (2019).

Meer do’s and dont’s over staafdiagrammen? Lees de inleiding https://www.datylon.com/blog/bar-charts-101.