Auto's in Nederland - Data Story

Data story about the impact of cars in cities, municipalities and provinces in the Netherlands. Using Vue.js and the D3.js to create a data story with interactive data-visualizations comparing cities, municipalities and provinces with the amount and type of parking facilities in the Netherlands.

Concept

A interactive choropleth map showing the amount of parking facilities in each province and each municipality. When clicking on a municipality, the parking facilities of the parking area's are shown on the map. Hover over a parking facility to see information about the parking facility: price, type of parking facility. Beside the map are multiple datavisualizations showing the amount of parking places of the facility compared with the total in the municipality, the percentages of each type of parking facility in the municipality, and the relation between the amount of parking facilities and the age distribution of a municipality.

Dependencies

• Vue
• D3

See package.json for more information.

Install

Clone the repository and navigate to the directory.

Install dependencies:

npm install

Build, lint & develop

Compile files and run hot-reload development server:

npm run serve

Build app for production:

npm run build

Lint files:

npm run lint

Data

To make the datavisualisaton I've used several datasets. I combined them together for a complete dataset with overlapping information of the RDW dataset and location data. The data I've gathered come from the following resources:

RDW

The RDW is the national organization that tracks the registration of vehicles and vehicle related subjects in the Netherlands. The data I used are about organizations of parking places in the Netherlands. The datasets gathered from RDW.nl are:

• Open Data Parkeren: GEBIED
• Open Data Parkeren: GEBIEDSBEHEERDER
• Open Data Parkeren: GEBRUIKSDOEL
• GEO Parkeer Garages
• Open Data Parkeren: GEOMETRIE GEBIED
• Open Data Parkeren: Index Statisch en Dynamisch
• Open Data Parkeren: PARKING OPEN
• Open Data Parkeren: PARKING TOEGANG
• Open Data Parkeren: SPECIFICATIES PARKEERGEBIED
• Open Data Parkeren: TARIEFDEEL
• Open Data Parkeren: TIJDVAK
• Open Data Parkeren: PARKEERGEBIED

CBS

The CBS is the national organization for collecting information about the dutch society. The data I used is the area layout of the provinces and the municipalities of the Netherlands. The dataset gathered from CBS is:

• CBS gebiedsindelingen

GeoNames

GeoNames is a website that stores information about geometric map details. The data I've gathered is the complete postal codes data of the Netherlands. The dataset gathered from GeoNames is:

• GeoNames Data - countries

Resources

• Getting started with Vue - MDN
• Vue.js Cheatsheet
• New features in Vue 3 and how to use them - LogRocket
• Working with Webpack in Vue 3

License

Apache-2.0 License