Week 1

Maandag

• Concept verder uitwerken (zie readme voor concept)
• D3 inladen Door de script tag in te laden is dit gelukt
• Data cleaning De nesting en cleaning moest nog een aantal stappen voor gemaakt worden.

Dinsdag

• D3 map continenten tekenen i.p.v. landen De hele dag ben ik bezig geweest met alles ombouwen en te zorgen dat de drawmap.js module geen kaart tekent om basis van landen maar van continenten in vizhub.com
• Data transformeren Eind van de dag verder gegaan met het nesten van continenten die weer genest zijn per eeuw.

Woensdag

• Data transformeren
  • Alles van afgelopen twee weken (functional programming) gekopieerd en hier verder mee gegaan
  • Functie met Daan geschreven
  • Uiteindelijk niet gebruikt omdat D3 een betere nest functie heeft
• SPARQL query Met IVO gekeken naar

Donderdag

• Voorbeeld van Laurens overgenomen (stukje van data transformeren) Mijn geschreven functie met Daan vervangen door die van Laurens
• Data genest en over D3 nesting geleerd

Vrijdag

Voorbeeld van Laurens verwerkt in met mijn code https://beta.vizhub.com/RoyCsuka/41ed839f714c4767bec2c53fe51f1713?edit=files&file=index.js

• Input velden met radio button erin gezet i.p.v. selectie velden
• Wiki geschreven en bijgewerkt

Week 2

Maandag

• Data transformeren Ben erachter gekomen dat mijn nesting nog niet heel lekker zat dus heb ik alles om gegooid
• Plotten van locaties op de map werkt niet Ben er vrijdag tijdens de stand-up achter gekomen dat het plotten van je locaties met D3 wel werkt als je je data doorgeeft naar de D3 functie op deze manier: "[data.value]" i.p.v. "data.value".

Dinsdag

• Elke stap van Laurens na gelopen van de .on('change' selectionChanged) voorbeeld zie vizhub Veel data niet nodig gehad maar wel proberen te begrijpen wat Laurens stap voor stap doet in zijn code en hoe het werkt.
• Wiki geschreven en bijgewerkt

Woensdag

• Mijn selectionChanged functie geschreven In deze functie ben ik de hele dag bezig geweest om de geselecteerde data te vinden in mijn huidige data en die terug te geven in een variabele: die er zo uit ziet (Laurens heeft me hiermee geholpen): let arrOfSelectedData = data.find(element => element.key == this.value)
• De geplotte locaties updaten door de update .attr() eerst mee te geven voor dat enter() en append() zijn geweest
• .remove().exit() werkt niet? Heb kris zijn hulp gevraagd en heb er met Coen ook naar gekeken maar die denken dat het aan mijn nesting ligt. Daarvoor heeft kris een functie voor mij geschreven net voor ik de data plot:

    // props van Kris
    const flattened = arrOfSelectedData.values.reduce((newArray, countries) => {
        newArray.push(countries.value)
        return newArray.flat()
    }, [])

Donderdag

• Mijn .exit().remove() werkt! Vandaag heb ik de bug gefixt die ik gister had ondervonden. Het lag niet aan de nesting van mijn data maar op de manier waar ik de .selectAll() heb geschreven in mijn plotLocations functie.

Die was namelijk zo geschreven dat die alle cirkels aanmaakt op basis van alle continenten die er zijn en niet op de basis van de cirkels die geplot moet worden / verwijderd en vervangen. Zo ben ik van deze code: svg.selectAll('.' + data.country) Naar deze code gegaan: let circles = svg.selectAll('circle').data([data][0])

• Mijn selectionChanged functie verder geschreven
  • De scale functie bekeken van D3 en toegepast
  • De minimale en maximale waarde van het aantal items terug
  • De HTML titel elementen aanpassen op basis van de nieuwe data
  • Op de geselecteerde item .active gezet en het witte blok op de achtergrond mee laten bewegen (zie gif hieronder)

Vrijdag

• Wiki geschreven en bijgewerkt
• Presentatie