ralfz123 / frontend-applications

🎓 Project where I use D3 & React.js for data visualization for de Volkskrant - Frontend Applications

Frontend Applications 20-21

The car in the city

Frontend Applications, a course of the Tech-track of Information Design. It is a thema semester of the third year from the study CMD. In this course I will learn to clean raw data, transform the data and apply it in a datavisualization using D3.

🚀 Purpose of Project

Commissioned by de Volkskrant, I have to look for an interesting angle on 'The car in the city'. This allows me to help the editorial staff of de Volkskrant to write interesting and new articles. In this project, I take an interesting research question and research it completely. I am going to look at what data is available in the RDW datasets that we have received. I will also clean up this data and transform it into usable data. With this data and the research question (which I want to answer) I will make a data visualization using D3.

The exercise

The assignment is to make a narrative application for the Volkskrant, with the theme 'The car in the city'. It is important that the story has a news value and that everything forms a whole. Incidentally, the application must be made in a front-end framework. As a frontend framework I use React.js.

👉 Click here for more details about my project research.

😍 Concept

Research Question

What is the difference in terms of how busy electric charging is between day and evening in the Hilversum area?
My assumption is that the evening was much busier than the electric charge in the morning, because at night, everyone at home and wants his / her car charging. In the morning, everyone takes their car to work.

Sub questions

1. When is it busy in the parking areas (in parking lots / in parking garages)? My assumption is that it can be very busy, especially on holidays and weekends.
2. Is it busier in the evening than during the day in the parking areas? My assumption is that there is a certain balance in terms of activity between daytime and evening. People work during the day (now mainly at home #corona) and most people are at home in the evening.
3. Is it possible to reserve a parking space? My assumption is that there are subscriptions to parking areas and that you therefore have priority to park somewhere.
4. Is there a maximum time that you can park in a parking space (parking times in connection with the car charged)? My assumption is that you can park in a parking area indefinitely, but that there are opening and closing times for a parking area.
5. Why are there not several electric charging points at parking places (outside the center)? My assumption is that there is not enough enthusiasm for that (because not many people have an electric car yet) .
6. Why are there only electric cars allowed in such a parking lot? My assumption is that there are parking areas that are only intended for electric cars.
7. How expensive is it for electric cars to park? My assumption is that parking is the same for both electric cars and normal cars. By the way, this depends on where you park.

💡 Idea

I want to make a data visualization, using D3, to show the reader how 'ideal' the life is of an electric car driver who lives in the city while still having to charge his / her car.

🔴 Link to app

🔢 Data

I think I can use this dataset for my subject. The data variables I think I can use, are:

• lat
• lng
• available
• charging

Dataset structure

{
 point: {
  lat: 52.21061864,
  lng: 5.17506312
},
 status: {
  available: "2",
  charging: "0"
}

🤓 Technical summary

This data visualization will be built, using:

• JavaScript
• D3
• React.js
• Functional Programming Patterns

⚙️ Install

1. Clone the repository:

git clone https://github.com/ralfz123/frontend-applications.git

2. Install dependencies

npm install

3. Run the app

npm start

4. Go to localhost in the browser

http://localhost:3000/

📁 Resources

Credits to Danny de Vries && Laurens Aarnoudse && Robert Spier for giving interesting lectures about Functional Programming and Frontend Data and how to deal with it. I would also like to thank @vuurvos1 and @RowinRuizendaal for helping and thinking.

• Aarnoudse, L. (2020, October 28). Rubric. Consulted from https://github.com/cmda-tt/course-20-21
• Aarnoudse, L. (2020, October 28). Slides. Consulted from https://cmda-tt.github.io/course-20-21/slides/
• Web Dev Simplified. (2020, November 18). Consulted from https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw
• React documentation. (2020, November 19). Consulted from https://reactjs.org/docs/getting-started.html

👮 License

This project from Ralf has a MIT © License