Dag 8 (17 11 2021)

Vandaag ben ik bezig geweest met mijn stacked bar chart. Als eerste ben ik begonnen met het zoeken naar een nieuwe manier van deze code te schrijven. Hier liep ik al snel tegen het punt aan dat een .map functie een undefined variabel aansprak. Hiervoor heb ik Suwi gevraagd om mij hiermee te helpen. Samen met Suwi heb ik de code veranderd van:

var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
  return data.map(function(d) {
    return {x: parse(d.year), y: +d[fruit]};
  });
}));

Naar:

  var dataset = ["grass", "fire", "water"].map(typeName =>data.filter(p => p.type === typeName));

Hierdoor kreeg ik al snel problemen echter. Dit kwam omdat ik in het nieuwe stuk code niet gebruik maakte van een variabel die x en y aangaf werd er verder in de code geen data aan gekoppeld. Daarnaast kreeg ik ook hele rare errors zoals:

Uncaught (in promise) TypeError: d3.scaleOrdinal(...).domain(...).rangeRound is not a function
    at d3Stacked (d3stacked.js:110)
    at countStats (index.js:91)
    at index.js:32

Ik gok dat dit komt omdat er dus geen data in de functie wordt gezet, waarna de volgende error misschien komt.

Na zelf wat doorgewerkt te hebben omdat Suwi druk was was ik bijna op het punt dat ik mijn data af kon beelden. De bars waren er en de assen ook, alleen kwamen de bars niet goed op de assen terecht. de bars begonnen aan de bovenkant van de y as en liepen uit naar beneden. Door samen met Suwi en Marloes, een klasgenoot van mij, te kijken kwamen we erachter dat de data verkeerd aangegeven werd op de axis bij het maken van de bars. Hierdoor hebben we de kleine code van:

    .attr("y", function (d) {
      return height;
    })

naar:

    .attr("y", d => height - y(d.totaal))

Vandaag heb ik ook nog tussendoor en aan het einde mijn wiki geschreven.

Recap

Wat heb ik vandaag gedaan?

• Ik heb gewerkt aan mijn stacked bar chart

Wat ga ik morgen doen?

• Mijn stacked bar chart afmaken
• Mijn wiki afmaken