Frontend Applications for de Volkskrant

The Dutch newspaper De Volkskrant asked us to find interesting patterns and insights for the subject "The car in the city", using datasets from the RDW. These datasets contain information about parking spaces and registered vehicles in the Netherlands. By using this data we can create interactive data visualizations using JavaScript and D3.

More information about De Volkskrant can be found at Wikipedia (English) or at Volkskrant.nl (Dutch).

All of the RDW datasets can be found here.

📊 Data Story

I created an interactive data story that shows how cities deal with P+R locations. First of all I show which cities have a lot of P+R locations and how they have distributed the parking capacity of those locations. Then I show a map showing the national distribution. You can also see how cities distribute their P+R locations across the city and how far they are from the city center. View the data story here.

💡 Concept

🔎 Research question

With my data visualization I want to address the following topic:

How are Park & Ride locations distributed across the Netherlands?

With this question I have thought of several subquestions, which focus more deeply on the subject of Park & Ride locations.

• How far are the P+R locations from the city center?
• Which city has the most P+R locations?
• How large is the parking capacity of these locations?

💭 Assumptions

I don't expect small towns to have a P+R location. I expect that the bigger the city, the further away a park and ride location is from the city center. I think the city of Amsterdam has the most P+R locations with a high parking capacity. I expect that commercial providers hardly own any P+R locations. I expect that most P+R locations have a train station within walking distance.

📊 Interesting variables

From dataset "GEO PenR":
You can view the data inside this data set here.

• Location gives the location of a P+R facility as an object with coordinates.
  Example output: {latitude: "53.165117644", longitude: "5.829843478"};
  
  
• AreaDesc contains the name of the P+R location including the city name where the P+R site is located.
  Example output: "Park & Ride Barchman Wuytierslaan (Amersfoort)";
  
  
• StartDataArea contains the date on which the P+R location was first opened. Formated as YYYYMMDD.
  Example output: 20131118;
  
  
• AreaManagerId provides an identification number of the P+R site administrator.
  Example output: 2448;
  
  
• AreaId contains a unique identification number of the parking site. This can be used to collect more information about a P+R location from another dataset within the RDW.
  Example output: "307_BARC".
  
  

From dataset "Specificaties Parkeergebied":
You can view the data inside this data set here

• AreaId contains a unique identification number of the parking site. I can use this to connect it to the "GEO PenR" dataset.
  Example output: "307_BARC";
  
  
• Capacity returns the amount of parking spots a given location has. I can use this to show how large a P+R parking site is.
  Example output: 48;
  
  
• DisabledAccess gives the number of reserved parking spaces for disabled people.
  Example output: 2.
  
  

To convert the city name of a P+R parking location to usable latitude and longitude coordinates, I need an API that provides this as a service. I want to use the geocoding service from HERE for this.

From dataset "Geocode" by HERE Maps API:
You can view more information about this data set here.

• position gives information about the latitude and longitude coordinates of a given city.
  Example output: {"lat": 51.82611, "lng": 4.83329};
  
  

⬜️ Empty values

When a dataset contains empty values, I will either not use the empty cells or interpert the value in a cell as null. This depends of course on what the subject of the corresponding column is. Below are the empty values I came across and what I did with them:

• Inside the dataset PenR GEO, there was one P+R location without an AreaDesc (the name of a P+R location plus the city name). Because of this, I put the name as null and the place name as null as well. I removed this "city" from the map in my visualization.

• About 54 areaIds (unique identification numbers) of P+R locations were missing from the dataset Specificaties Parkeergebied. This means, among other things, that I can't get any information about parking capacity from them. I set the capacity of these locations to 1, because I need the capacity to create a pie chart. In this way, the missing capacities are still visible and D3 can work with them.

I haven't come across any other missing data, but I have specified in my code that if there are missing values, they will be replaced for null.

✏️ Early Sketches of my concept

I would like to visualise the spread of P+R locations across the country and show the distance between a city centre and a P+R location. I've created several sketches: a general visualization of the number of P+R facilities and visualizations that show the spread of P+R facilities across the country on a map.

After receiving feedback from de Volkskrant, I decided to first make a general visualization of P+R parking capacity divided over cities. See the sketch below:

Here a user selects a bar from the barchart to get a pie chart with more information on how the P+R parking capacity is distributed in the selected city.

Digital sketch based on a combination of the general visualization and the map visualization, in the form of a data story.

🗒 Sources

I've used the following sources while working on my project:

Survey data cleaning

• JSON Dataset generated by my classmate Jonah Meijers.
• Loading JSON data locally (work-around) lecture by Tech Track teachers Robert and Laurens.
• Using filter() and map() lectures by Laurens. Documentation about filter() and map() used from MDN.
• Using unary operator for converting string values to numbers article by Nikhil John on Medium. Read it here.
• Removing an item from a string and replacing it's value documentation about splice() used from MDN.
• Replacing quotes and degree characters adapted RegEx code from a StackOverflow answer by Joe.
• Using test() to check if a string contains letters code adapted from a StackOverflow answer by Oriol. Used additional test() documentation from MDN.
• Convert coordinates in Degree, Minute, Seconds format to decimal values code adapted from a StackOverflow answer by Gavin Miller.

RDW data cleaning

• Dataset GEO P&R from the RDW. View the dataset here.
• Dataset Specificaties Parkeergebied from the RDW. View the dataset here.
• Geocoding API powered by HERE Maps. Used for finding coordinate data from city names. Learn more about the API here.
• Counting duplicate values and removing the duplicates code adapted from from a StackOverflow answer by Eddie.
• Using async/await inside map code adapted from an article by Zell Liew.
• Check if data is valid a lecture by Tech Track teacher Laurens.
• Extract years from a string used documentation about substring() from MDN.
• Extraxt text between parentheses RegEx code adapted from a StackOverflow answer by go-oleg.
• Fetching data and coverting to JSON a lecture by Tech Track teacher Laurens.

Making a D3 visualization

• Making a bar chart with D3 YouTube video by Curran Kelleher. View the video here.
• Customizing Axes of a bar chart YouTube video by Curran Kelleher. View the video here.
• Interactive Pie chart an example from D3 Graph Gallery. View the example here.
• Pie chart with annotation an example from D3 Graph Gallery. View the example here.
• Creating a legend with D3 an example from D3 Graph Gallery. View the example here.
• Making a map of the Netherlands with the help of the visualization made by fellow student Merlijn Bergevoet.
• Topojson layer from the Netherlands made by Cartomap. Used via their GitHub repository.
• Creating connecting lines between coordinates example from D3 Graph gallery. View the example here
• Creating tooltips on hover with D3 example used from bl.ocks.org. Created by user 'd3noob'. View the example here

Working with the Vue framework

• Introduction tutorials course "Intro to Vue 3" by Vue Mastery. View the tutorial here.
• Vue documentation made by the Vue development team. Read the docs here
• Implementing D3 with Vue lecture by Tech Track teacher Robert.
• Parent child communication in VueJS article by Vegibit. Read it here.

Datastory

• Header image made by Vinícius Henrique Photography. Used via Unsplash.
• Agenda Amsterdam Autoluw made by the Gemeente Amsterdam. View the PDF (in Dutch) here
• Autoluw Rotterdam article written by Mobiliteits Platform. Read it here (in Dutch).

🔗 License

This repository is licensed as MIT • ©️ 2020 Lars Ruijs