Deze les kwam Danny langs om een les te geven over async programmeren. Ik heb geleerd waarvoor async programmeren voor gebruikt wordt en waarom ik dit hoogstwaarschijnlijk ook in mijn project moet gaan gebruiken. Hiernaast kwamen er nog een paar belangrijke begrippen naar voren:

• Callbacks: functies die worden gespecificeerd als argumenten bij het aanroepen van een functie die begint met het uitvoeren van code op de achtergrond. Wanneer de achtergrondcode klaar is met uitvoeren, roept deze de terugroepfunctie aan.
• Promises: Het Promise-object vertegenwoordigt het resultaat (of mislukking) van een asynchrone operatie en de resulterende waarde ervan.
• Async/Await: Code dat wordt uitgevoerd als andere code klaar is met laden.

Ook ben ik begonnen met het maken van mijn webapplicatie. Ik heb mijn allereerste api-call ooit gemaakt. Hiernaast heb ik iets nieuws toegepast, namelijk het gebruik van props. Dit ziet er als volgt uit:

<section>
    {#each data as item}
        <Bar {item} /> 
    {/each}
</section>

    export let item;
    onMount(() => {
         const amountCalories = item.calories;
    });

Vervolgens heb ik voor ieder product in mijn dataset een kaartje gegenereerd. De waardes voor caloriën heb ik omgezet naar een suikerklontje. Dit wil ik straks doorvoeren voor vet en proteïne. Dit ziet er zo uit:

Deze les was een gastcollege van Rijkswaterstaat. Er kwamen 3 mensen die samenwerken in een team bij ons langs om te vertellen over wat zij doen. De mensen van rijkswatersstaat ontwerpen en maken data visualisaties. Het leuke hieraan is dat ze dit vaak ook met D3 maken. Ze lieten zien hoe een opdracht tot stand komt, het proces naar het eindresultaat en tegen welke problemen ze aanlopen. Als voorbeeld dat ze in hun presentatie gebruikte was een animatievideo over stormvloed.

Deze animatievideo was te zien: https://www.youtube.com/watch?v=8qKfTTC-920

Wat is storytelling?

• Een manier om met mensen te verbinden
• Mensen onthouden verhalen
• Het is ambigu

Volgende week wil ik de kaartjes klikbaar maken en een grafiek tonen met data. Deze week heb ik wat meer stappen gemaakt in het ontwikkelen van CSS. Ook heb ik voor vet en proteïne een icoontje laten tonen ipv harde waardes uit mijn dataset. Het resultaat ziet er als volgt uit:

De plaatjes worden gegenereerd met de volgende complexe code:

function printData(attrValue, src, element) {
	if (attrValue <= 0) {
		element.innerHTML += ` ${attrValue}`;
	} else {
	for (let j = 0; j < attrValue; j++) {
			let img = document.createElement("img");
			img.className = "info-detail";
			img.src = src;
			element.appendChild(img);
		}
	}
}

// Key is bijv in een array: id, name, calories
// Value is de waarde hiervan, bijv: 1, 'Ik ben de naam', 105

for (const [key, value] of Object.entries(item)) {
	let id = item.id;
	const scales = [];
		scales['calories'] = 0.02;
		scales['fat'] = 0.02;
		scales['protein'] = 1;

	if(key != 'id' && key != 'name') {
		let attrValue = value * scales[key];
		let src = `../images/${key}.png`;
		let el = document.querySelector(`#amount-${key}-${id}`);
		printData(attrValue, src, el);
	}
}