Opschonen Data

Survey Data

Toegang tot de dataset

Door het JSON bestand in een javascript bestand te zetten en de dataset te koppelen aan een variable kan er met de dataset worden gecommuniceerd, zonder te fetchen of een server op te hoeven zetten. Thanks to Robert 👍

Eerste kolom 😅💦

Ik begon met alle niet ingevulde velden te herkennen en deze een waarde te geven, zodat deze allemaal overeen komen. Ook zijn er soms streepjes ingevuld en ook deze worden getackeld, omdat ik met deze functie alles onder de 2 tekens omzet naar "GEENVOORKEUR"

const deData = data;
console.log(data);

//fix empty strings
let dataList = fillEmptyStrings(deData);

//function for fixen empty strings
function fillEmptyStrings(data) {
  let cleanData = [];

  data.forEach(function (value) {
    if (value.politiekeVoorkeur.length < 2) {
      cleanData.push("GEENVOORKEUR");
    } else {
      cleanData.push(value.politiekeVoorkeur);
    }
  });
  console.log("dit is de nieuwe array", cleanData);
  return cleanData;
}

Toen dacht ik dat het slim was om hier de waardes van de kolom meteen om te zetten naar uppercase zodat er geen verschil meer kan zitten in kleine- en hoofdletters...

        else{
            cleanData.push(value.politiekeVoorkeur.toUpperCase());
        }

Maar het leek mij uiteindelijk toch verstandiger om ook hier een kleine functie van te schrijven zodat ik deze ook kan hergebruiken voor andere kolommen en zo blijven de stappen leesbaarder en overzichelijker.

function bringAllToUpper(data) {
  let dataUpperCase = [];
  data.map(function (value) {
    dataUpperCase.push(value.toUpperCase());
  });
  return dataUpperCase;
}

Toen heb ik een functie geschreven om alle spaties weg te filteren uit de antwoorden van de survey. Hiervoor heb ik deze bron gebruikt.

function removeWhiteSpace(data) {
  let dataNoSpaces = [];
  data.map(function (value) {
    dataNoSpaces.push(value.replace(/\s/g, ""));
    //https://flaviocopes.com/how-to-replace-whitespace-javascript/#:~:text=The%20%5Cs%20meta%20character%20in,occurrence%20of%20the%20white%20space.
  });
  return dataNoSpaces;
}

RDW data

Het eerste wat mij meteen opvalt als ik het SurveyData opschonen vergelijk met het opschonen van de RDWData, is dat er een duidelijk verschil is in mijn begrip van de map en filter functies. Bij de Surveydata maak ik steeds nog een lege array aan terwijl dit natuurlijk niet nodig is. Pas vanaf het opschonen van de RDW data is het functional-programming echt geland en kon ik er super lekker mee aan de slag.

Hieronder volgen de wat complexere leermomenten van functional-programming bij de RDW data:

Ik heb geleerd hoe ik een if statement met map kan gebruiken.

function addObjectUndef(data) {
  return data.map((result) => {
    if (result == undefined) {
      return (result = {});
    } else {
      return result;
    }
  });
}

Ik heb geleerd hoe ik de spread operator kan toepassen en deze toegepast op mijn eigen code, en heb geleerd hoe ik een item in een object kan returnen met map.

function addIds(data) {
  return data.map((item, index) => {
    if (index !== undefined) {
      return { ...item, id: index + 1 };
    } else {
      return { id: index + 1 };
    }
  });
}

Twee manieren gebruikt om onzinnige data uit de dataset te filteren

function filterData(data) {
  return data.filter((result) => result.accessPointLocation);
}

function removeNulls(data) {
  return data.filter((result) => result !== null);
}

En ik heb natuurlijk ook hier de functional patterns toegepast:

• Ik heb gewerkt met kleine herbruikbare functies
• Ik roep alle functies onder elkaar aan, helemaal boven in mijn code zodat de lezer meteen snapt wat er gebeurd in de code
• Ik geef alle functies comments zodat het nog duidelijker wordt voor de lezer
• Ik geef alle variabelen van zelf sprekende namen

Voor de rest heb ik allemaal vrij makkelijke filter en map functies gebruikt en hebben niet zoveel toelichting nodig. Hier kan je de volledige code bekijken: https://github.com/SimonPlanje/frontend-data/blob/main/frontenddata/index.js

opschonen voor d3

Ik heb later tijdens het gebruiken van d3 nog een id moeten toevoegen aan alle objecten in de dataset om het te kunnen visualiseren. Daarvoor heb ik nog redelijk complexe spread functies geschreven.

Ik moest een aantal keer door de dataset heen loopen om id's toe te voegen om de verschillende parkeerplaatsen van elkaar te onderscheiden met een id.

const addsClassesNone = addClassesNone(filterUselessData);
const addsClassesDisabled = addClassesDisabled(addsClassesNone);
const addsClassesCharging = addClassesCharging(addsClassesDisabled);
const addsClassesBoth = addClassesBoth(addsClassesCharging);

Daarvoor heb ik de volgende functie geschreven en deze 4 keer opnieuw opgesteld met een andere if statement. Met spread voeg ik steeds het id toe aan de data-objecten. Ik voegde de id's none, charging, disabled en both toe. Deze staan voor of er laadpalen en oplaadpunten zijn op de parkeerplaats.

function addClassesNone(data) {
  return data.map((item) => {
    if (item.chargingPointCapacity == 0 && item.disabledAccess == false) {
      return { ...item, id: "none" };
    } else {
      return item;
    }
  });
}