Datavisualisatie voor boekhouders I: de sprekende jaarrekening

De voorbije twee vrijdagen had ik het genoegen om voor een publiek van boekhouders een uurtje te mogen spreken over datavisualisatie. Boekhouders zijn uiteraard de cijferaars bij uitstek en ik vond dan ook een geïnteresseerd luisterend oor. Maar ik was ook verrast door het grote onbenutte potentieel voor (goede) datavisualisatie in de boekhoudkunde. In twee delen geef ik suggesties voor hoe in de boekhoudkunde visualisatie een rol zou kunnen spelen.

Onbenut potentieel

In de voorbereiding van mijn keynote nam ik de jaarrekening onder de loep. Voor de niet-boekhouders onder u: de jaarrekening geeft de staat weer waarin een bedrijf zich op het einde van het (boek)jaar bevindt. De jaarrekening omvat de boekhoudkundige balans (activa en passiva) en de bedrijfsresultaten.

Zoals je ziet, is een blanco jaarrekening eigenlijk een invulformulier.

blankejaarrekening

Dit ligt volgens mij ook aan de basis van het nog grote onbenutte potentieel voor datavisualisatie in de boekhouding: de jaarrekening is bedoeld om cijfers in te stoppen, niet om cijfers er uit te laten springen en te laten spreken. In wat volgt probeer ik daar verandering in te brengen.

Als voorbeeld nam ik de jaarrekening van de Onderneming van het jaar, Bouwbedrijf Willemen uit Mechelen. De activa uit deze jaarrekening zien er zo uit.

jaarrekening_willemen_gc_2012_activa_crop

Laten we de activa uit deze jaarrekening eens stap voor stap visueel verrijken.

1. Overbodige randen

Wat me dadelijk opviel is de grote afstand tussen de rubrieken links en de bedragen in de tabel, waar het uiteindelijk toch om gaat. Om de bedragen goed te kunnen aflezen heb je bijna een meetlat nodig.

Bovendien bemoeilijken de verticale tabelranden het horizontaal scannen tussen de rubrieken en de bedragen. Dus het eerste wat ik deed was simpelweg het verwijderen van de tabelranden, wat een luchtiger en beter leesbaar resultaat oplevert.

jaarrekening_willemen_gc_2012_activa_1zonderranden_crop

2. Kolommen schudden

Daarna schudde ik de kolommen door elkaar. Waar ik wilde toe komen:

  • De bedragen van het huidige boekjaar dichterbij de rubrieksnamen brengen.
  • De tijd van links naar rechts laten lopen. In het origineel staan de gegevens van het vorige boekjaar rechts naast deze van het huidige boekjaar, waardoor de tijd tegenintuïtief van rechts naar links loopt.

jaarrekening_willemen_gc_2012_activa_2kolommen_crop

3. Trends toevoegen

De gegevens van het vorige boekjaar zijn handig om te kunnen vergelijken. Maar met sparklines, handige minivisualisaties, kunnen we hier veel verder in gaan. In dit geval gaat het wel eerder om sparkbars dan om sparklines, maar het principe is duidelijk: op een heel kleine oppervlakte kunnen voor de hoofdrubrieken de trends van de laatste vijf jaar worden getoond.

jaarrekening_willemen_gc_2012_activa_3sparklines_crop

4. Verhoudingen tonen

Er blijft nog ruimte over op de jaarrekening om nog wat verder te gaan. Na de sparkbars (die eigenlijk een horizontale analyse vormen) kunnen we ook de verhoudingen tussen de belangrijkste rubrieken tonen (een verticale analyse).

Met simpele staafjes kunnen de verhoudingen visueel worden weergegeven, waardoor voor het identificeren van de belangrijkste rubrieken het bekijken en vergelijken van de cijfers zelfs overbodig wordt.

jaarrekening_willemen_gc_2012_activa_4hoofdrubrieken_crop

5. Een stapje verder

Deze laatste stap kunnen we nog verder doortrekken. We kunnen ook de verhoudingen tussen de subrubrieken weergeven en tegelijk de hiërarchie tussen rubrieken en subrubrieken visualiseren.

jaarrekening_willemen_gc_2012_activa_5subrubrieken_crop

6. Een likje verf

Om het onderscheid tussen vaste en vlottende activa (het hoogste niveau van onderverdelen van de activa) verder te verduidelijken kunnen we de staafjes nog een kleurtje geven.

Dit is het eindresultaat:

jaarrekening_willemen_gc_2012_activa_6kleur_crop

Springende cijfers

Als opmerking op mijn visuele verbeteringsoefening voor de jaarrekening hoorde ik uit het publiek dat de jaarrekening een officiëel document is. Uiteraard begrijp ik dat wat eigenlijk een invulformulier is geen datavisualisatie nodig heeft.

Maar alle cijfers komen uiteindelijk wel in een databank terecht. En hiervoor kan het volgens mij niet zo heel moeilijk zijn om er een visueel verrijkt jaarverslag uit te laten rollen. Een paar simpele staafjes met de juiste afmetingen en eventueel een likje kleur: meer is er niet nodig om de cijfers uit het jaarverslag eruit te laten springen en te laten spreken.

De 200 grootste bedrijven ter wereld gevisualiseerd: de making of

Als onderdeel van een dossier over de grootste bedrijven ter wereld wou ik een visualisatie maken die twee dimensies van deze bedrijven blootlegt. Ik wou met name de geografische spreiding van deze bedrijven voorstellen (uit welke regio en land zijn de bedrijven afkomstig?), maar ook aangeven hoe deze bedrijven per sector zijn verdeeld.

Niet zo eenvoudig. Maar toen kwam plots RAW op mijn pad, een nieuwe tool die snel en eenvoudig hiërarchie in data kan weergeven. De gegevens van de bedrijven leken me een interessante dataset om eens met RAW te experimenteren.

Na een beetje trial en error, had ik al snel een mooie visualisatie:

top200_raw

Dit is een zogenaamd cirkelvormig dendrogram, waarin ‘dendro’ staat voor boom en je dus vanaf de stam (het midden van de cirkel) de vertakkingen van de regio’s en verder van de landen kan zien. Elk bedrijf vormt zo uiteindelijk een twijg van de boom.

Maar ik wou toch wat meer. RAW is gebouwd bovenop de fantastische javascript library D3.js en voor het cirkelvormig dendrogram geeft RAW ook de inspiratiebron. Met die broncode kon ik dus aan de slag.

Eerst was het zaak om de data in json te krijgen, een bestandsformaat dat data opslaat als javascript. Voor het opkuisen van de data gebruikte ik Open Refine, dat bij nader onderzoek ook json bleek te kunnen exporteren. Een meevaller dus.

Om de bedrijven ook per sector weer te geven, experimenteerde ik eerst met kleur. Maar dat bleek geen voltreffer: 13 verschillende kleuren voor de 13 sectoren is van het goede te veel:

top200_colors

Dan maar knopjes om de bedrijven per sector uit te kunnen lichten. Met Twitter Bootstrap is een rij knopjes zo gemaakt en met D3 is het interactief benadrukken van de bedrijven uit iedere sector ook niet zo moeilijk.

screenshot_top200_zonderdiv

Al bij al een mooi resultaat. Maar ik wou graag nog een manier om voor ieder bedrijf wat meer gegevens beschikbaar te maken. Ik dacht eraan om de namen van de bedrijven klikbaar te maken om zo de data te laten verschijnen. Of om een Bootstrap tooltip te voorzien.

Maar al bij al bleek het gemakkelijker een gewoon een <div> te gebruiken die bij een muisbeweging over een bedrijfsnaam de relevante informatie toont. En zo ziet het eindresultaat er dus uit (gebruik de knoppen om sectoren uit te lichten en beweeg over de namen van de bedrijven voor meer cijfers):

De visualisatie is niet geschikt voor kleine schermen (ook het hovereffect werkt niet op aanraakschermen), maar ik vind het een geslaagd experiment. Twee dimensies van een dataset met 200 records (die bovendien ook hiërarchisch gestructureerd is) weergeven, is niet eenvoudig. Maar dit cirkelvormig dendrogram met filterknoppen en slaagt er op een efficiënte en mooie manier in.