frontend data

Opdracht

Creeër een datavisualisatie met d3.js, gebaseerd op RDW-data. Clean deze data van tevoren.

Auto’s in de stad

... link to live demo-->

Deze opdracht bestond eigenlijk uit twee delen:

• Data cleaning van enquêtedata
• Opdracht voor de Volkskrant

Mijn initiële plan was om alles uiteindelijk in de twee repo's hetzelfde te hebben en dan in de deploy alles te scheiden dmv een navigatie; dit bleek toch een ontzettend verwarrend idee te zijn dus heb ik ervoor gekozen om alles volledig te scheiden. Deze repo is gericht op de eindopdracht mbt de RDW-data voor de Volkskrant, en de functional-programming repo heb ik gestript tot alleen het functional-programming deel met de surveydata.

Beide staan beschreven in de wiki. Alle benodigde informatie voor beide vakken staat in de wiki van de repo van dit vak; frontend data.

Table of Contents

• Assessment

• Auto’s in de stad

  • ✅ To-do
  • 📋 Concept
  • 🅿️ Parkeergelegenheden in coronatijd
  • ⚙️ Installation
  • ↔️ Interaction diagram
  • 🗃 Data
  • 👯🏿‍ Features (+ wishlist)
  • 🏫 Assignment
  • ℹ️ Resources
  • 🗺️ License

✅ To-do

See the project board for my current to-do's

📋 Concept

Voor meer informatie over het concept, zie de wiki.

🅿️ Parkeergelegenheden in coronatijd

Welke bijkomende problemen zijn ontstaan met de komst van corona, met betrekking tot parkeergelegenheden?

Deelvraag 1: avondklok

Welke parkeerplaatsen zouden qua tijdsframe een probleem kunnen vormen indien er een Corona-avondklok wordt ingevoerd?

Datasets

• https://opendata.rdw.nl/Parkeren/Open-Data-Parkeren-TIJDVAK/ixf8-gtwq
• https://opendata.rdw.nl/Parkeren/Open-Data-Parkeren-GEOMETRIE-GEBIED/nsk3-v9n7

Datapunten/kolommen

• AreaManagerId (api: areamanagerid) - Identificatiecode van de gebiedsbeheerder of parkeerexploitant.

• DayTimeFrame (api: daytimeframe) - Naam van een bepaalde dag voor een gebiedsbeheerder. Dit zijn de weekdagen maandag tot en met zondag, en de namen van de speciale dagen.

• StartTimeTimeFrame (api: starttimetimeframe) - Datum en tijd van het begin van een periode waarop een bepaald tijdvak geldig is.

• EndTimeTimeFrame (api: endtimetimeframe) - Tijdstip (uumm) waarop het tijdvak eindigt. Voor aansluitende tijdvakken is de EndTimeTimeFrame van het eerste tijdvak gelijk aan StartTimeTimeFrame van het tweede.

• EndDateTimeFrame (api: enddatetimeframe) - Datum en tijd van het einde van een periode waarin een bepaald tijdvak geldig is.

• MaxDurationRight (api: maxdurationright) - De maximale tijdsduur waarvoor in een gebied dat valt onder de betreffende regeling, in dit betreffende tijdvak een recht kan worden verworven (minuten).

• MinParkingInterruption (api: minparkinginterruption) - De minimale tijdsduur in minuten tussen twee rechten in hetzelfde gebied voor hetzelfde voertuig die geldt bij dit TimeFrame.

Eventueel bruikbaar:

• ClaimRightPossible (api: claimrightispossible) - Indicatie of het mogelijk is binnen dit TimeFrame een recht te verwerven of niet. J: in dit tijdvak is het wel mogelijk rechten te verwerven, N: in dit tijdvak is het niet mogelijk rechten te verwerven.
• FareCalculationCode (api: farecalculationcode) - Verwijzing naar het tarief, indien voor een recht in een tijdvak een tarief verschuldigd is. Kan alleen van toepassing zijn als ClaimRightPossible = J

Aanname: er zullen best wat parkeerplaatsen in de grote steden zijn wiens tijden binnen de avondklok zullen vallen

Initial schetsen

Kaart, en nog wat visualisaties in de vorm van een bar chart om de aantallen aan te geven (of time instance/gantt) , of hierarchic chart voor verhouding met 'niet-conflicterend'.

Interactive kaart; zoom-able per provincie/stad en tooltips als je een parkeerplaats selecteert. Vragen:

• Labels in de legenda
• Beide soorten weergeven? Of alleen een landelijke kaart met de plaatsen waarin conflicterende parkeergelegenheden aanwezig zijn
• Combineren met iets als een pie chart en andere charts voor het aantonen van de verhouding; in een soort storytelling-verhaal?

⚙️ Installatie

Clone deze repository naar je eigen device:

$ git https://github.com/deannabosschert/frontend-data.git

Navigeer dan naar deze map en run:

npm install

Om het project te draaien, run dan:

npm run dev

Dependencies

"devDependencies": {
    "@11ty/eleventy": "^0.11.0",
    "cross-env": "^7.0.2",
    "ejs": "^3.0.1",
    "express": "^4.17.1",
    "node-fetch": "^2.6.0",
    "npm-run-all": "^4.1.5",
    "rimraf": "^3.0.2",
    "csvtojson": "^2.0.10",
    "mkdirp": "^0.5.1"
  },
  "dependencies": {
    "d3": "^5.16.0",
    "nodemon": "^2.0.2"
  }

Scripts

  "scripts": {
    "predev": "rimraf _site",
    "dev:eleventy": "npx @11ty/eleventy --formats=html,njk,ejs,gif,jpg,png,css --serve --port=3000",
    "dev:css": "sass --watch assets/scss:_site/assets/css/",
    "dev": "cross-env ELEVENTY_ENV=development run-p dev:*",
    "debug": "DEBUG=* eleventy",
    "prebuild": "rimraf _site",
    "build": "cross-env ELEVENTY_ENV=production run-s build:*",
    "build:eleventy": "eleventy",
    "build:css": "node-sass --importer node_modules/node-sass-glob-importer/dist/cli.js assets/scss/index.scss _site/assets/css/index.css"
  }

🗃 Data

🐒 API

Welke externe data source is featured in het project en wat zijn z'n properties? RDW datasets Tijdvak, Specificaties Parkeergebied, Geometrie Gebied.

Properties

• areaid

• capacity

• areageometryastext

• (disabledaccess)

• areamanagerid

• daytimeframe

• starttimetimeframe

• endtimetimeframe

• enddatetimeframe

• maxdurationright

• minparkinginterruption

• claimrightispossible

• farecalculationcode

Rate limiting

Geen! Of naja, zo'n 1.3 miljoen heb ik gehoord. Request een aantal datasets binnen 10sec en je kan er misschien aan komen. Limit gewoon de requests wanneer mogelijk, OK?

💽 Data cleaning

Wat is er gedaan met de gefetchte data? Cleaning pattern?

Zie mijn Wiki voor een gedetailleerd inzicht in mijn data cleaning en functional patterns.

👯🏿‍ Features (+ wishlist)

What would you like to add (feature wishlist / backlog)? Wat zou je graag nog toe willen voegen? (feature wishlist/backlog)?

• Een script dat automatisch alle gefilterde data wegschrijft naar mijn 'data'-folder in prebuild.

🏫 De Opdracht

(click to expand)

Create a data visualisation (using the d3 library) based on given data where data can be explored through interaction using enter, update, and exit.

In this course we were rated on:

• Application of subject matter
• Understanding
• Quality
• Process

Learning goals

This assessment focusses on:

• goal 1 (learn how to create with libraries)
• goal 2 (create interactive visualisations from external data)
• subgoal 1 (read _site)
• subgoal 2 (write _site)
• subgoal 5 (manipulate elements)
• subgoal 6 (load external data)
• subgoal 7 (transform data)
• subgoal 8 (use svg)
• subgoal 9 (use libraries)

Week 1 - Data Cleaning 🐒

Goal: learn how to create with libraries
I've learned how to load data locally and to fetch externally from an API, to clean that data and render this data.
Zie mijn wiki voor meer.

Week 2 - Datavisualizations 📊

Goal: create interactive visualisations from external data
I've learned how to visualize the previous cleaned data in an interactive datavisualization, made with D3.js
Zie mijn wiki voor meer.

Rubric

Rubric- detailed rating of my project

ℹ️ Resources

Credits

• Onze superamazingteachers bij de Tech Track @CMD ❤️
• Curran ❤️
• Mijn amazing supportgroup ❤️
• Iedereen die mij tolereert in Teams ❤️

(Kleine) inspiratiebronnen

• https://www.section.io/engineering-education/templating-your-static-site/ voor het gebruiken van ejs met 11ty
• https://opendata.rdw.nl/browse?category=Parkeren&provenance=official&page=1 voor de RDW-datasets
• Documentatie op de sites van Nunjucks, Eleventy, EJS, D3.js, etc.
• Mijn voorgaande projecten, zoals progressive-web-apps

🗺️ License

Auteur: Deanna Bosschert , license door MIT