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.

Add Comment

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *