week 3: gastles robert spier

Gastles Robert Spier

Vandaag kregen we een gastcollege van Robert Spier, hij was een Leraar bij ons op school maar heeft nu een carrière switch gemaakt en werkt in Amsterdam aan de Zuid-as bij Deloitte.

Korte samenvatting van de les: In de les hebben we het gehad over een aantal functies die je in je D3 project kunt gebruiken. Sommige dingen wist ik al wel maar veel dingen had ik ook nog nooit gezien omdat we pas net met D3 & Svelte werken.

Het eerste onderwerp ging over het gebruik van “parameters” als je een functie aanmaakt met D3. Zo heb je bijvoorbeeld de “e” van “event”, de “d” van “data” of bijvoorbeeld de “i” van “index”. Vaak geven we 2 parameters mee omdat er een bepaalde volgorde is. kijk maar naar het volgende voorbeeld

.attr('cy', function (d) {
 return projection(d.geometry.coordinates)[1];
})

Hier zie je dat we in de parameters van de functie een (e, d) hebben staan. in dit geval moet dat omdat we beginnen met een event en data gebruiken vanuit een bepaalde variabele. Wanneer je alleen de (d) zou doen als variabele wordt er gedacht dat het event, denk aan een click, voor de “d” staat terwijl je de data ook nog wil gebruiken maar dat dus niet meer kan.

een ander onderwerp ging over hoe je interactie kan toevoegen aan een barchart of andere grafieken. Door namelijk ergens over heen te hoveren of te clicken kun je een tekst veld zichtbaar maken met extra data zodat jr duidelijk kan maken waarom de ene bar hoger als de andere is of om specifieke data te laten zien. zie het voorbeeld hieronder hoe je met D3.text en een string format die interactie kan toevoegen

.on('mouseover', () => {
  svg
   .append('text')
   .attr('x', projection(selectedStationFeature.geometry.coordinates)[0] + 10)
   .attr('y', projection(selectedStationFeature.geometry.coordinates)[1])
   .text(`${selectedStationFeature.properties.name}`)
   .attr('class', 'station-label');
})

Een ander onderwerp wat wel een stuk lastiger te begrijpen was voor mij ging over het gebruiken de “.join” methode en de enter(), update() en exit() functies. het ging ook vrij snel maar van wat ik begreep is dat je in deze functies bepaalde functies kunt schrijven om je d3 projecten beter te kunnen laten animeren en dat de performance er ook iets op vooruit zou gaan, in plaats van je hele grafiek opnieuw te laden kan je met de update functie dit doen.

Wat kan hiervan meenemen in mijn project?

Indenk vooral het interactieve gedeelte dat we uitgelegd kregen. vond dat wel heel bruikbaar en zag een aantal methodes die ik nog niet eerder zag en ook verder kan gaan ontdekken die mij kunnen helpen bij het project. hieronder zie je er een aantal van:

• .transition()
• .text()
• .append()