D3 Data Workflow

Door middel van een goede workflow te hebben en dus niet het wiel steeds opnieuw zelf te willen uitvinden, bespaar je tijd en ruimte voor andere dingen 🤓

Datastructuur

Dit was eerst de datastructuur:

{
 point: {
    lat: 52.21061864,
    lng: 5.17506312
 },
 id: "28008b58-5a03-11ea-8ed4-42010a840fd0",
 status: {
    available: "2",
    charging: "0"
 },
 power: 11040,
 publicaccess: "Public"
}

Maar hetgeen wat ik nodig had, waren maar een paar variabelen, namelijk: lat, lng, available, charging. Het was toen niet nodig om de overige variabelen mee te geven aan de client-side. Vandaar dat ik ervoor gekozen heb om de benodigde variabelen uit de dataset te filteren. Dit heb ik gedaan door middel van filteren. De datastructuur die ik uiteindelijk terugkreeg, was:

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

Mappenstructuur

Ik heb hier de mappenstructuur van mijn project. Mijn project begint eigenlijk in het mapje d3. Dus vandaar dat ik mijn mappenstructuur alleen van d3 laat zien,

/d3

• d3
  • data
    • dataDay.json
    • dataEve.json
  • script
    • index.js
  • index.html
  • styles.css

Interactie 🔥

Wat gebeurt er in deze datavisualisatie?

Je ziet een aantal plots op de kaart. Dit zijn parkeergebieden die laadpalen bevatten.

Je kan door middel van de filter functies kiezen;

• Moment van de dag - de data van de ochtend (08:00u) of avond (20:00u).
• Status laadpalen - de beschikbare laadpalen of bezette laadpalen per parkeergebied.

Toekomstvisie

Code-based

• Modules: ik zou sowieso mijn code willen opdelen in modules, omdat mijn code daardoor veel overzichtelijker wordt en beter leesbaar en begrijpbaar voor een andere developer.

Dataviz

• Informatie van de parkeergebieden over de laadpalen (aantal beschikbaar en bezet) weergeven in het dashboard.