Making of… koorddiagram van selecties EK 2012

Posted on by Jerry Vermanen

Op 8 juni begint het EK voetbal 2012 in Polen en Oekraïne. Vlak nadat ik als datajournalist bij NU.nl begon, heb ik samen met de NUsport-redactie plannen gesmeed om sport en datavisualisatie te gaan combineren. Het belooft namelijk een hete sportzomer te worden met het EK voetbal en de Olympische Spelen voor de boeg.

Het idee om de selecties van het EK 2012 te gaan onderzoeken, was vrij snel geboren (lees hier het nieuwsbericht). Sterker nog, ik zag direct voor me hoe ik het wilde visualiseren: de chord diagram (die ik hierna koorddiagram noem) van de Javascript library D3 is geschikt om onderlinge relaties weer te geven.

Maar ik ben geen held in programmeren. Hoe ben ik als ‘journalist die een beetje kan copypaste-programmeren’ tot bovenstaand resultaat gekomen? Een visualisatie die het op vrijdag 1 juni zelfs tot het beroemde Datablog van The Guardian wist te schoppen.

Het grote voordeel van D3 is dat er behoorlijk veel voorbeeldcode beschikbaar is. Zodra je de library downloadt, krijg je er een map met voorbeelden bij. Open de bestanden in een Javascript editor – ik gebruik zelf Komodo (op MacBook Air) en Free Javascript Editor (op werk) – en probeer te begrijpen wat er ongeveer gebeurt.

Onderstaand voorbeeld is de koorddiagram die je standaard in de library vindt.

Geloof me, je snapt in het begin echt niet hoe de formules in de code exact werken. Maar het belangrijkste is dat je kunt doorgronden waar je de data in stopt en hoe visualisatie wordt opgemaakt. Welk getal bepaalt de dikte van de lijn? Waar kan ik kleuren veranderen? Hoe maak ik de cirkels iets groter?

Wat mij behoorlijk goed heeft geholpen, is Water. Dit is een applicatie waarin je diezelfde koorddiagram kunt bewerken en direct het resultaat terugziet. Terwijl je de getallen manipuleert, verandert de visualisatie. Speel hier eens een kwartier mee, dan snap je een stuk beter hoe je de diagram kunt manipuleren.

Maar de standaardvorm die D3 mij gaf, was niet goed genoeg voor wat ik wilde. Ik moest kunnen aangeven voor welke landen en clubs de spelers uitkomen. Tijd om eens naar wat voorbeelden te kijken. Ik wist dat Sargasso een tijd geleden een visualisatie had met interrupties van kamerleden (gemaakt door Alper Çuğun van Monster Swell). En via-via kwam ik er achter dat er een vrij uitgebreide koorddiagram met labels op internet stond.

Op dit moment is ‘rechtermuisklik, Opslaan als…, webpagina, compleet’ jouw beste vriend. Sla de code op, kijk hoe de pro’s het oplossen en gebruik die code voor jouw eigen visualisatie. Met de Frankenstein-code heb ik flink geworsteld, maar na flink wat trial and error kreeg ik onderstaand resultaat.

De basis ligt er. Hierna heb ik wat dummy-data gemaakt, landennamen uitgetikt en kleuren ingesteld. Het uitgebreide model ziet er als volgt uit.

Als je naar de code kijkt, is er een specifiek punt waar veel werk in zit, namelijk de data. De koorddiagram vraagt namelijk om data in een matrix. Hieronder een voorbeeld van hoe zoiets eruit ziet.

Daaronder tref je de volgende regel:
var clubs = ['Club A', 'Club B', 'Club C', '...'],

Je moet de matrix als volgt lezen: Club A heeft [eerste getal eerste regel] verbindingen met Club A, Club A heeft [tweede getal eerste regel] verbindingen met Club B, etc. De tweede regel is Club B heeft [eerste getal tweede regel] met club A, enzovoort.

Ik heb bovenstaande matrix gemaakt na een paar keer trail and error in Excel. Michel Abbink van NUsport leverde mij een mooi Excel-bestand met de naam van de speler, land en club waar hij voor uitkomt. Hier kun je de data downloaden in Google Spreadsheet.

Daarmee kun je een draaitabel maken, waar je vervolgens met wat copypaste een matrix mee maakt waarin je jouw eigen volgorde qua landen mee maakt. Bedenk van tevoren goed hoe je de labels georganiseerd wilt hebben, hoe zoiets er in een matrix uitziet en wat dat betekent voor je Excel-bestand. Vooruitdenken scheelt veel frustratie.

Het Excel-bestand sla je op als CSV, je plaatst de haken om je getallen en zet de landen en clubs in het var clubs = ['...'], gedeelte. Fingers crossed! Als je visualisatie hiervoor altijd heeft gewerkt maar nu niet meer, dan is er een grote kans dat je een regel bent vergeten te kopiëren of dat je een komma verkeerd hebt geplaatst. Loop het oorspronkelijke bestand (BELANGRIJK: sla je bestanden in versies op!) na en vergelijk de structuur.

Vervolgens heb ik in een aantal stappen naar het eindresultaat toegewerkt. Allereerst probeerde ik alle clubs in de koorddiagram te proppen.

Dat werkt overduidelijk niet. Daarna heb ik alle clubs buiten de ‘grote vijf’ en de Eredivisie in de categorie Overige gestopt.

Hierna heb ik de marges tussen de vlakken aangepast en de kleuren ingesteld. Hierdoor kwam de koorddiagram ineens tot leven. Ik heb de HTML-pagina vervolgens opgemaakt en via AddThis knoppen voor sociale media toegevoegd. Met dit als resultaat.

Code en conclusie

Wil je nu zelf aan de slag met deze code? Dat kan. Hier kun je het downloaden en ermee aan de slag gaan. Ik stel deze aangepaste code beschikbaar onder een Creative Commons BY-SA licentie. Je mag het dus voor commercieel gebruik remixen, als je maar naar onze versie verwijst en jouw werk onder dezelfde licentie deelt. Download de code hier.

De visualisatie heeft een behoorlijk hoge informatiedichtheid, maar door de kleuren en witruimtes blijft het overzichtelijk. Het gaat hier niet om de exacte aantallen, maar de relaties tussen clubs en landen.

Hoewel ik voor een volgend project wel overweeg om Tipsy te gebruiken. Hier kun je tip tools aan een D3-visualisatie koppelen.

Bovenstaande heeft mij enorm veel tijd gekost. Maar nu ik eenmaal werkende code heb, kan ik het voor meerdere projecten inzetten. De koorddiagram is volgens mij een hele mooie intro in D3, want nu wil ik deze taal verder proberen te doorgronden. Er zitten echter ook een aantal nadelen aan.

Het is erg intensief om een visualisatie te maken. Het is geen hapsnap-werk: je moet hier toch echt wel een paar dagen voor inplannen. Ook is er aan de gebruikerskant een belangrijke beperking: het werkt enkel in Chrome, Firefox en – daar komt het – Internet Explorer 9. Een grote groep gebruikers kan dus niet van al dat harde werk genieten.

Toch blijf ik mij de aankomende periode in D3 verdiepen. Het is een goede introductie in programmeren. Daarnaast komt er een moment dat het marktaandeel verouderde browsers zo miniem is dat het geen beperking meer is.

Tips voor tutorials of cursussen D3 zijn welkom.

592 thoughts on “Making of… koorddiagram van selecties EK 2012”

  2. We hebben ook een EK-kaart gemaakt. Dat is met dezelfde dataset gedaan.

    Ik twijfelde zelf ook. Is dit wel voor iedereen duidelijk? Ik had verwacht dat de koorddiagram vooral door mijn datacollega’s zou worden gedeeld en de kaart door lezers: de eerste is grafisch en technisch aantrekkelijk, de tweede is conventioneel.

    Wat blijkt? De koorddiagram krijgt de meeste shares, likes, +1’s, etc. Van wie allemaal weet ik niet, maar het is wel opmerkelijk. Tussen al die reacties verwacht ik eigenlijk ook de meest heftige meningen: mensen die het geweldig vinden en anderen die het he-le-maal niets vinden.

    Dus wat ik bij een volgend project doe? Weet ik nog niet. Volgens mij moet ik kiezen voor de variant die mensen het liefste via sociale media delen. Wat vind jij?

  3. Pingback: Selecties EK 2012
  4. Pingback: Selecties EK 2012 - Datajournalistiek.nl

Leave a Reply

Your email address will not be published. Required fields are marked *