D3

Ik heb geoefend met D3 door te kijken naar de video's van Curran Kelleher. Ik ben gelijk begonnen met de video over het maken van een barchart, omdat dat mij het meest effeciënte begin leek van oefenen met D3. Het was een erge uitdaging, maar na veel oefenen heb ik een barchart kunnen maken. Hij is hier te zien. Deze video komt uit deze reeks video's en oefeningen, wat ik erg handig vind. Ik ben na de oefening wat variabelen wezen aanpassen, om erachter te komen of ik wel echt elke regel code snap.

Eerlijk gezegd vind ik de materie van D3 nog best wel pittig en zit mijn hoofd vol met vragen 'Hoezo gebruiken ze dit?', maar ik heb er vertrouwen in dat ik dat door veel te oefenen wel steeds beter onder de knie krijg.

Vizhub

Ik heb op Vizhub het een en ander met D3 gedaan om een statische datavisualisatie maken. Ik vond het vrij pittig, maar zeer leuk om iets visueels te maken van data. Dit is mijn Vizhub profiel.

Enter-Update-Exit

https://medium.com/@c_behrens/enter-update-exit-6cafc6014c36

Enter()

Met enter zorg je ervoor dat je een element 'ingaat' en vanuit daar aanpassingen aanbrengt in die elementen.

Code

const = ...

Update() + call()

Exit()

Code

selection.exit().remove();

var numbers = [15, 8, 42, 4, 32];
function update() {
  var selection = d3.select("#chart")
    .selectAll(".bar").data(numbers)
    .style("height", function(d){ 
      return d + "px"; 
    })
    .style("margin-top", function(d){ 
      return (100 - d) + "px"; 
    });
selection.enter()
    .append("div").attr("class", "bar")
    .style("height", function(d){ 
      return d + "px"; 
    })
    .style("margin-top", function(d){ 
      return (100 - d) + "px"; 
    })
    .on("click", function(e, i){
      numbers.splice(i, 1);
      update();
    });
  selection.exit().remove();
};
update();