In de tweede week ben ik bezig geweest met het gebruik met websockets. Omdat Marcio ons vertelde dat de websocket connectie met de API nog niet werkend is heb ik dit halverwege de week op de lange baan geschoven. Vervolgens ben ik begonnen met het maken van een uitschuif menu voor de knoppen en parameters, deze zag er als volgt uit:

Schermafbeelding 2022-06-22 om 14.51.35.png

Daarnaast ben ik ook bezig geweest met het experimenteren van een “gooey” effect op de D3 grafiek, hierdoor kreeg je een soort heatmap als visualisatie.

Schermafbeelding 2022-06-21 om 17.17.26.png

De code die ik hier voor gebruikt heb zag er als volgt uit:

const defs = svg.append('defs');
const filter = defs.append('filter').attr('id','gooey');
filter.append('feGaussianBlur')
    .attr('in','SourceGraphic')
    .attr('stdDeviation','10')
    .attr('result','blur');
filter.append('feColorMatrix')
    .attr('in','blur')
    .attr('mode','matrix')
    .attr('values','1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7')
    .attr('result','gooey');
filter.append('feComposite')
    .attr('in','SourceGraphic')
    .attr('in2','gooey')
    .attr('operator','atop');

https://www.visualcinnamon.com/2015/05/gooey-effect/

https://tympanus.net/codrops/2015/03/10/creative-gooey-effects

https://observablehq.com/@d3