Dag 2

Dag 2 (26-10)

Distributie en percentage

Vandaag ben ik begonnen met het schrijven van mijn code voor het modelleren van de opgegeven dataset. Ik wilde graag een visualisatie maken met de kleuren van de kleren die men droeg op de eerste dag. Hiervoor heb ik initieel de volgende twee functies geschreven.

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

Met behulp van de distribution() functie kan ik de distributie van antwoorden in een array bepalen. Voor de kleuren komt daar het volgende object uit.

{
 Zwart: 24,
 Grijs: 17,
 Blauw: 13,
 Wit: 19,
 Rood: 3,
 Groen: 6,
 Bruin: 5,
 Oranje: 2,
 Paars: 2,
 Geel: 2
}

Dit object kan vervolgens weer gebruikt worden in de percentages() functie. Voor de kleuren komt hier vervolgens het volgende object uit.

function percentage(object) {
  let totalAnswers = 0;
  // Retrieve the total answers.
  Object.keys(object).forEach((key) => {
    totalAnswers += object[key];
  });
  Object.keys(object).forEach((key) => {
    object[key] = Math.round((object[key] / totalAnswers) * 100);
  });
  return object;
}

{
 Zwart: 26,
 Grijs: 18,
 Blauw: 14,
 Wit: 20,
 Rood: 3,
 Groen: 6,
 Bruin: 5,
 Oranje: 2,
 Paars: 2,
 Geel: 2
}

Kleuren naar hex

De kleuren van de kleren worden in de data gerepresenteerd in een string. Deze wilde ik eerst in een array kunnen plaatsen. Hiervoor heb ik de commaSeperatedStringToArray() functie geschreven.

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

Voor mijn visualisatie moeten de kleuren omgezet worden naar hex kleur codes. Hiervoor heb ik de getHexColors() functie geschreven.

let clothingHexColors = clothingColors.map(getHexColors);

function getHexColors(colors) {
  return colors.map((color) => hexColors[color]);
}

In dit geval is clothingColors een array van arrays gevuld met strings. Met behulp van een map() functie pas ik de getHexColors() functie toe op al de arrays in de clothingColors array. In de getHexColors() functie wordt er vervolgens weer een map() functie uitgevoerd. Deze functie transformeert de normale strings naar de kleurcodes uit het hexColors.json bestand.

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

Helpen van mijn support group

Naast dat ik aan mijn eigen opdracht heb gewerkt heb ik vandaag ook veel assistentie verleend aan mijn support group.

Bekijk hier wat ik tijdens de derde dag heb gedaan.