Wiki • Concept • Data visualisation
This repo is created to use the data processed in the functional-programming repo, to create a data visualisation using D3. The data consists of parking data gathered by the RDW (Dutch Vehicle Authority), which can bring many great insights when put into a data visualisation. Read more about the assingment in my Debriefing, and read about the concept further below
- Understanding how D3 works
- Using D3 to create a data visualisation with data I myself have processed.
To get started, you first need to clone the repo and install the dependencies:
git clone https://github.com/theonejonahgold/frontend-data
cd frontend-data
yarn install || yarnyarn dev # Opens a dev server and watches src files.
yarn build # Builds a bundle for the website.
yarn lint # Runs ESLint on files to check for consistent code.What is the relation between distance and availability of parking places to hot-spots in the city?
- How close are parking areas to the hot-spot?
- What are the average hours of the parking areas?
- What are the capacities of the parking areas?
The used variables are available through this link.
.
├── src # Contains JS and CSS source code.
│ ├── utilities # Utilities are general functions that can be adapted to certain use cases. They are divided into files named after the type they manipulate.
│ ├── helpers # This folder is for functions used for specific use cases like language parsing.
│ ├── modules # The modules folder is a place where all functions compositions are written.
│ ├── index.js # Where it all comes together. This file is run when compiled to JS code.
│ └── index.css # The main CSS file, where all the styling is created using TailwindCSS.
├── public
│ └── index.html # The html file that gets loaded when you run a dev server or run start a production build.
├── build # Contains identical folder structure as src folder, with compiled JS code, node modules compiled to web modules.
└── config # Contains the Nodemon configurations used for development of this project.