Dag 4 (11 11 2021)

Ik ben de dag begonnen met code te schrijven om kleuren te schalen op de bars van mijn diagram. Deze kleuren schalen op basis van welke evolutie de Pokémon is. Na online gekeken te hebben kwam ik op de volgende code:

        let grass = d3.scaleLinear().domain([1, 10]).range(["white", "green"]);
        let fire = d3.scaleLinear().domain([1, 10]).range(["white", "red"]);
        let water = d3.scaleLinear().domain([1, 10]).range(["white", "blue"]);

        rect.selectAll(".grass").attr("fill", function (d) {
            return grass(d);
        });
        rect.selectAll(".fire").attr("fill", function (d) {
            return fire(d);
        });
        rect.selectAll(".water").attr("fill", function (d) {
            return water(d);
        });

Hieruit kreeg ik geen errors, alleen deed deze code ook niks. Hier vanuit heb ik uiteindelijk met Robert hiernaar gekeken en kwamen we als eerste er al achter dat .attr("fill", function (d) niet kan omdat fill een styling property is. Daarvanuit hebben we de volgende code geschreven:

    let grass = d3.scaleLinear().domain([1, 10]).range(["lightgreen", "darkgreen"]);
    let fire = d3.scaleLinear().domain([1, 10]).range(["yellow", "red"]);
    let water = d3.scaleLinear().domain([1, 10]).range(["lightblue", "darkblue"]);
///////
            .style('fill', (d) => {
                return d.type === 'grass' ? grass(d.evo) : d.type === 'fire' ? fire(d.evo) : water(d.evo)
            });

Nu de kleuren op de bars stonden kwam ik tot de ontdekking dat de kleuren niet worden geschaald op basis van het aantal bars die tot een bepaald type horen. Hierdoor ben ik gaan kijken of ik de stappen hiertussen kan vergroten. Dit was gemakkelijk gedaan door .domain([1, 10]) te veranderen naar .domain([1, 3]).

Recap

Wat heb ik vandaag gedaan?

• Bars kunnen schalen in kleur op basis van het type Pokémon

Wat ga ik morgen doen?

• Chart beginnen vanaf stat: 300 zodat de chart beter leesbaar is.