Sport datavisualisatie

In een eerder blog schreef ik over mijn “Big Five for Life” en de wens om mijn passie voor sport, voeding en gezondheid te combineren met mijn passie voor IT en data in het bijzonder. Ik kan natuurlijk gaan zitten wachten tot de ideale baan voorbij komt, maar ik kan ook al gewoon een hobby projectje oppakken in mijn vrije tijd. Direct ook een mooie kans om zelf weer eens echt met de IT inhoud en uitvoering bezig te zijn. Iets wat ik soms wel mis in mijn huidige functie als Business Intelligence (BI) manager bij Achmea.

Twee weken terug las ik het artikel “State of the Art of Sports Data Visualisation“. Het artikel beschrijft een aantal nieuwe manieren om sportdata te presenteren. Van ranglijsten en de kwaliteiten van sporters tot het belang van “storytelling”. Het doel is om op een visuele manier een verhaal te vertellen en daarmee nog grotere groepen enthousiast te maken voor een sport of evenement. Ik werd gegrepen door de eenvoudige manier waarop het verloop van een ranglijst tijdens een voetbaltoernooi in het artikel werd weergegeven, zie hieronder. Ik vroeg mij af of ik zelf iets vergelijkbaars kon maken om bijvoorbeeld het verloop van de 2019 CrossFit Games weer te geven.

Bron: aftertheflood.com

De eerste uitdaging was het verkrijgen van de data. Even googelen leverde al snel resultaat op. Weliswaar een oude CrossFit Open dataset uit 2013, maar een prima begin om een start mee te maken. De volgende vraag was in welke tool ga ik proberen de ranglijst te maken. Ik ben gestart in Microsoft PowerBI, een dashboarding tool die ook bij Achmea gebruikt wordt en gratis te downloaden is. Ik had ook al uitgezocht dat het type grafiek dat gebruikt wordt een “bump chart” heet. De vraag was dus of ik de CrossFit dataset in PowerBI als bump chart kon visualiseren. Helaas, ik kwam een heel eind maar het was het net niet. Ik had ergens een voorbeeld gevonden op internet, maar dat was niet zoals ik het wilde. Belangrijkste probleem was de ranglijst, die was alleen in de legenda weer te geven en dan ook nog eens in de verkeerde volgorde.

In mijn zoektocht naar een andere geschikte tool om dit te doen kwam ik al snel D3.js tegen. Ik had er nog nooit van gehoord, maar blijkbaar de tool voor het betere datavisualisatie werk. Feitelijk een javascript library en dus gewoon hardcore programmeren. Nou heb ik op zich genoeg programmeerervaring maar wel alweer van even geleden. Om niet direct al teveel hooi op mijn vork te nemen heb ik verder gezocht en kwam ik op R. Ik kende R van een data science cursus die ik begin dit jaar gevolgd heb. Bovendien net iets minder hardcore programmeren dan javascript. Aan de slag in R dus op basis van dit Bump Chart voorbeeld.

Alles bij elkaar heb ik er denk een goede dag werk aan gehad. Vooral het preparen van de data in R was even zoeken. R is heel sterk in het manipuleren van data, maar door mijn minimale ervaring met R koste het toch wat meer tijd. Toen het gelukt was moest ik opzoek naar de 2019 Games data, want om nu nog iets te presenteren uit 2013 leek mij niet zo heel relevant. Aangezien de data niet ergens eenvoudig te downloaden was moest ik zelf aan de slag met het bouwen van een “webscraper”. Ik had er weleens van gehoord, maar nog nooit één gebouwd. Het komt erop neer dat je code schrijft om de benodigde data van een webpagina te schrapen.

Gelukkig bleek R hier ook een geschikte library voor te hebben (rvest). Natuurlijk is de uitslagentabel op de games.crossfit.com website niet de meest eenvoudige html code om te schrapen. Ik ben dus ook wel een dagje bezig geweest met het bedenken en bouwen van een “webscraper”, maar uiteindelijk is het gelukt om de data in R te krijgen. Vervolgens alleen nog even de data in het juiste formaat transformeren en dan met mijn eerder geschreven code de ranglijst visualiseren.

Zie hieronder het resultaat, niet slecht voor een eerste projectje. Het linker deel is nog wat rommelig door het grote aantal deelnemers en de grote wisselingen in de ranglijst. Vanaf workout 6 stabiliseert de stand zich en vinden we de uiteindelijke top 10 bovenaan de ranglijst. Het is ook meteen duidelijk dat het dit jaar lang spannend is geweest. Als je echter kijkt hoe stabiel de ranking van Mathew Fraser is, dan is hij meer dan de terechte winnaar.

Het viel Imi ook op dat ik weer ouderwets enthousiast aan het programmeren was. Wat bij mij dan o.a. betekent dat ik om 1:00 uur ‘s-nachts nog bezig kan zijn met het oplossen van een programmeerprobleem. Kortom ik had als het ware een oude liefde teruggevonden. Direct door met een volgend project dus. Dat was uiteindelijk snel gevonden doordat ik een e-mail kreeg van “Medium” (lang leve cookies) over het combineren van R en D3.js. Het artikel beschreef bovendien een mooie visualisatie van de beoordelingen en box office inkomsten van filmseries. Deze visualisatie was weer gebaseerd op die van TV series uit The Economist.

Een mooie uitdaging om D3.js te leren en de voorbeeld visualisatie toe te passen op sportdata. “Steal like an artist” heet dat in data visualisatie termen. Uiteindelijk heb ik ervoor gekozen de overwinningen van Nederlandse wielrenners te visualiseren. Voor het verkrijgen van de data heb ik een webscraper geschreven die data ophaalt van cqranking.com. CQ staat voor cycling quotiënt en de CQ ranglijst is een wereldranglijst van professionele wielrenners. Ik heb alle data vanaf 1999 gedownload middels de webscraper. Het aantal CQ punten heb ik gebruikt om in de visualisatie de grootste overwinning van een wielrenner dat jaar weer te geven. Voor elke overwinning krijgt een wielrenner namelijk punten, voor de Ronde van Vlaanderen meer dan voor bijvoorbeeld Nokere Koerse. Een overzicht vind je hier.

In de grafiek zie je per jaar het totaal aantal overwinningen van elke Nederlandse wielrenner. De grootte van de stippen staat gelijk aan de grootste overwinning dat jaar. De grafiek is interactief, als je met je muis over de stippen beweegt wordt de trend van de bijbehorende wielrenner getoond en de informatie over de betreffende wielrenner en zijn grootste overwinning dat jaar. In het drop down menu kun je ook elke individuele wielrenner selecteren, de geselecteerde wielrenner wordt dan gehighlight in de grafiek. Je vindt de grafiek hier (werkt waarschijnlijk beter op je computer dan op je telefoon).

Erg leuk om mee te spelen en een verrassende manier om snel inzicht te krijgen in het palmares van een specifieke renner en hoe dat zich verhoudt tot andere renners. Zo heeft Theo Bos nog best aardig wat gewonnen op de weg, maar waren dat over het algemeen wel overwinningen in kleine wedstrijden. Mathieu van der Poel maakt uiteraard in deze grafiek ook een mooie opmars, zowel qua aantal als qua grootte van de overwinningen.

Op naar het volgende datavisualisatie project! Ideeën zijn welkom 🙂

Advertenties

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.