Spring naar de inhoud

Inzicht in Park & Ride data voor de Volkskrant

zwevende laptops met schermen van de app voor de volksrant
De datavisualisaties over Park & Ride parkeren voor de Volkskrant

De opdracht

De Volkskrant heeft mij gevraagd om voor het onderwerp “De Auto in de Stad” een interactieve datavisualisatie te maken. Hierbij maak ik gebruik van open data van de RDW, in het bijzonder data over Park en Ride faciliteiten in Nederland. De vorm van de visualisaties staat vrij, zolang ze maar gemaakt zijn met de JavaScript library D3.

Proces

Allereerst ben ik begonnen met het verzamelen van interessante data over Park en Ride parkeren en aanvullende onderzoeken van gemeenten over het nut ervan. De RDW heeft gegevens over waar Park en Ride faciliteiten zijn en hoe groot de capaciteit hiervan is. Ik heb vervolgens schetsen gemaakt over mogelijke visualisatievormen. Ik wil met de visualisaties laten zien welke steden veel P+R locaties hebben en hoe de capaciteit ervan is verdeeld per locatie. Tevens wil ik laten zien hoe de P+R locaties over de stad zijn verspreid. Deze visualisaties heb ik daarna in het echt gemaakt door live data van de RDW API te fetchen en deze data te visualiseren met behulp van de JavaScript library D3.

Resultaat

Het resultaat is een Single Page App gemaakt in Vue die actuele data van de RDW over beschikbaarheid en capaciteit van Park en Ride faciliteiten in Nederland visualiseert. De staafgrafiek toont het aantal locaties per stad en de cirkeldiagram toont de verdeling van de capaciteit. De kaart toont hoe de Park en Ride faciliteiten zijn verspreid over de stad.


Data

De data voor deze applicatie is afkomstig van de overheidsorganisatie RDW. De RDW houdt veel open data bij van voertuigen en parkeerlocaties in Nederland. Voor mijn applicatie heb ik gebruik gemaakt van twee datasets.

De eerste dataset geeft informatie over de locatie en naam van de P+R locatie. Iedere locatie heeft een uniek ID waarmee het kan worden gekoppeld aan andere datasets van de RDW. Zo heb ik een tweede dataset nodig voor het verkrijgen van informatie over de parkeercapaciteit van de locaties.

Van iedere P+R locatie is de naam van de stad beschikbaar. Om de stad te kunnen tonen op de interactieve kaart, heb ik de coördinaten van de stad nodig. Deze haal ik op via de geocoding API van HERE Maps.

Data opschonen

Tijdens dit project heb ik erg veel geleerd over hoe ik de twee datasets van de RDW met de externe HERE API kan combineren en opschonen. Ik heb in mijn code veel gebruik gemaakt van map() en filter() en heb daarnaast reduce() toegepast om één dataobject te krijgen met daarin informatie over het aantal P+R locaties per stad. Meer informatie over hoe ik de data met deze methodes heb opgeschoond, is te lezen in de wiki van mijn GitHub repository.

Schetsen

Voordat ik de grafieken maak met D3, maak ik eerst schetsen van de mogelijke visualisatie vormen.

schets van staafgrafiek met cirkeldiagram
Schets van grafieken voor het tonen van het aantal P+R locaties en de capaciteit ervan
schets van netwerk grafiek
Een schets van een network graph voor P+R locaties per stad
schets van netwerk grafiek op een kaart van nederland
Schets van een network graph met P+R locaties geplot op een kaart van Nederland

Interactieve grafieken

De eerste grafiek toont het aantal P+R locaties per stad. Wanneer je vervolgens op een van de steden drukt, is aan de rechterkant een pie chart zichtbaar die de verdeling van de parkeercapaciteit laat zien.

staafgrafiek met informatie over aantal park en ride facaliteiten en daarnaast een cirkeldiagram met parkeercapaciteit per stad
Het aandrukken van een stad zorgt voor een update in de pie chart.

De kaart laat zien hoe de Park en Ride locaties zijn verdeeld over Nederland. De roze cirkels zijn de P+R locaties. De grootte van een cirkel geeft aan hoe groot de parkeercapaciteit is voor die locatie. De blauwe stipjes symboliseren de locatie van het centrum van een bepaalde stad. Met de lijnen wordt aangegeven hoe ver de parkeerlocaties van het centrum liggen.

kaart van nederland met locaties van park en ride parkeren
Interactieve kaart met alle Park en Ride parkeerplekken in Nederland.

Code

Benieuwd naar de code van het project? Alle code voor dit project staat in deze GitHub repository. In de wiki van diezelfde repository geef ik meer uitleg over de code.

Bekijk het live

Het project is hier live te bekijken.