Week 5

Maandag 20-11-2023 - Switchen onderwerp The Pokedex

Deze les ging vooral over GEO data. Echter maak ik niet echt gebruik van GEO data in mijn datavisualisatie dus heb ik besloten om mij vooral te richten op mijn applicatie. Ik ben erg gaan twijfelen over mijn onderwerp. Ik ben van mening dat hetgene wat ik wil maken teveel tijd gaat kosten en erg weinig is om te tonen als eindopdracht. Ik heb daarom besloten om van onderwerp te veranderen.

Het idee uitgelegd

In principe behoud ik voor een deel hetzelfde idee. Ik wil met de PokemonAPI pokemons in kaartjes weergegeven. Hiernaast wil ik een zoekfunctie en sorteer functie maken om de datavisualisatie interactief te maken. Als er op een pokemon wordt gedrukt kan men statistieken van de specifieke pokemon bekijken d.m.v. een grafiekje. Ook zal er een legenda zijn om eventuele onduidelijke informatie te verduidelijken.

Voortgang project

Vandaag heb voor elke pokemon de data opgehaald en deze in een kaartje weergegeven. Mijn code kon ik bijna overnemen uit het deel van mijn Starbucks bestanden. Het resultaat is hieronder te zien:

Woensdag 22-11-2023 - Werkcollege

Deze les heb ik vooral gebruik om te werken aan mijn applicatie. Vandaag heb mij verdiept in het maken van Svelte Stores. Op deze manier kan ik data doorsturen naar andere bestanden. Dit had ik ik nodig omdat ik meerdere API calls ga maken en deze in een apart bestand wil zetten. Hierdoor behoud ik de structuur in mijn applicatie door API calls bij elkaar te houden.

Een store maken is vrij gemakkelijk. Het volgende komt hierbij kijken:

Stap 1: Maak een bestand genaamd store.js

In dit bestand maak je een writeable store. Het is een container waar je data in kunt stoppen. Writeable wil zeggen: je kan de data lezen maar ook aanpassen

export const dataStore = writable([]);

Stap 2: In een svelte component importeer je de store vul je deze met .set

Array.set(dataStore);

Stap 3: Subscribe op de store. Subscribe zorgt ervoor dat als de waarde in de store wijzigt, ook de waardes in de subscribe veranderen.

store.subscribe(){}

Nu ik data kan meesturen kan ik een pokemondetail pagina maken waarin ik data laat zien die bij de desbetreffende pokemon hoort. Dit doe ik door de data in de url te vergelijken met de data die ik meegestuurd krijg vanuit mijn store.

var url = window.location.href;
const searchParams = new URLSearchParams(new URL(url).search);

await getSpecificPokemon(searchParams.get('name'));

Vrijdag 24-11-2023 - Deployment & Gastcollege Daniël Staal

Deze les ging vooral over het online zetten van de webapplicatie, oftewel: Deployment Ik heb een domein gekocht en mijn webapplicatie is nu zichtbaar via deze link.

Hiernaast kwam Daniël Staal een gastcollege geven waarbij hij liet zien wat hij maakt bij het bedrijf Climate Adaptation Services (CAS). Hij legt de nadruk op het overbrengen van een verhaal d.m.v. krachtige datavisualisaties. Elementen die hierin voorkwamen zijn bijv het exporteren van een Google Maps route. D.m.v. scrollen wordt de route op een kaart uitgelezen. Ook liet hij zien hoe je met geluid een ondersteunende factor kan zijn in een datavisualisatie.

Voortgang project

Vandaag heb ik een zoek functie toegevoegd met 2 filter knoppen om op alfabetische volgorde (en omgekeerd) te kunnen filteren. Dit was nieuw voor mij en heb ik op de volgende manier gedaan:

Deze functie kijkt of de waarde van een input veld overeenkomt met een naam uit de pokemonArray

function searchPokemon(input) {
    input = input.toLowerCase();

    return pokemonNames.filter(pokemon =>
        pokemon.name.toLowerCase().includes(input)
    );
}

Haal de waarde uit het inputveld op en stuur deze mee met de searchPokemon functie. Als de waarde gevuld is, laat dan de overeenkomende pokemons zien.

inputField.addEventListener('input', () => {
    inputQuery = inputField.value;
    pokemonSearchResult = searchPokemon(inputQuery);

    if(pokemonSearchResult) {
        getAllPokemonStats(pokemonSearchResult);
    } else {
        getAllPokemonStats(pokemonNames);
    }
});

Resultaat: