Data opschonen

Data opschonen

Een string met komma's

De data uit de enquête over de kleuren kwam in de vorm van een string. Deze string bevatte meerdere antwoorden die met komma's uit elkaar waren gehaald. Hiervoor heb ik de volgende functie geschreven. Deze functie verandert een string in een array van strings.

function commaSeperatedStringToArray(string) {
  // Replace whitespace using Regex.
  string = string.replace(/\s+/g, "");
  return string.split(",");
}

Een string in een hex kleur veranderen

Met behulp van de volgende functie kon ik strings omzetten in hex color codes. Ik deed dit met het lokale hexColorData.json bestand. Ik zocht in dit bestand met de opgegeven string als key. Dit gaf een hex color code terug in de vorm van een string.

function hexColor(string) {
  return hexColorData[string];
}

{
  "Zwart": "#000000",
  "Grijs": "#808080",
  "Wit": "#FFFFFF",
  "Rood": "#FF0000",
  "Groen": "#008000",
  "Blauw": "#0000FF",
  "Oranje": "#FFA500",
  "Geel": "#FFFF00",
  "Paars": "#800080",
  "Bruin": "#8B4513"
}

Een array van strings in een array van hex kleuren veranderen

Met behulp van deze functie kon ik een array van strings veranderen in een array van hex color codes. Deze functie had ik nodig voor het aanmaken van de gradients in mijn visualisatie.

function hexColorArray(array) {
  return array.map((string) => hexColorData[string]);
}

De distributie van waardes in een array

Door deze functie te gebruiken kan ik de distributie van waardes in een array berekenen en deze in een object verwerken. Voor elke nieuwe waarde wordt een nieuwe key aangemaakt. Zodra dezelfde waarde nogmaals tegenkomt wordt de counter van de corresponderende key met één verhoogd. Op deze manier wordt de distributie berekend.

function distribution(array) {
  let object = {};
  for (let i = 0; i < array.length; i++) {
    if (object.hasOwnProperty(array[i])) {
      object[[array[i]]]++;
    } else {
      Object.assign(object, { [array[i]]: 1 });
    }
  }
  return object;
}

De gradient aanmaken

Met behulp van deze functie kan ik een array van hex kleuren omzetten in een CSS gradient. Deze gradiënt kan ik dan vervolgens gebruiken als achtergrond van een element. Op deze manier heb ik de kleuren van de kleren van mijn klasgenoten gevisualiseerd.

function gradient(colorArray) {
  let interval = 100 / (colorArray.length - 1);
  let string = "linear-gradient(to right,";
  // If the array contains more then one color, create the gradient.
  if (colorArray[1]) {
    for (let i = 0; i < colorArray.length; i++) {
      // To create the desired effect the hex color has to be repeated.
      string += ` ${colorArray[i]} ${interval * i}%,`;
      string += ` ${colorArray[i]} ${interval * (i + 1)}%,`;
    }
    string = string.slice(0, -1) + ")";
    return string;
  }
  // If the array of colors only contains one color return this color.
  return colorArray[0];
}