D3 Bar Chart Bas

    let svg = d3.select("body").append("svg")
            .attr("width",670).attr("height",300)

d3.csv("animal-lifespan.csv").then(data => {
  data.forEach(d => {
    d.lifespan = +d.lifespan
  });

  svg.selectAll("rect")
    .data(data)
    .join("rect")
    .attr("y", (d, i) => i * 25)
    .attr("width", d => d.lifespan)
    .attr("height", 25)
})

Distanzia la posizione verticale dei rettangoli con un passo di 25 pixel.

Imposta la larghezza del rettangolo alla proprietà lifespan del dato associato.

Modificare il passo sull’asse delle y e l’altezza dei rettangoli fino a riempire l’intera altezza e lasciando uno spazio fra le barre.

Moltiplicare la proprietà lifespan per un valore che faccia estendere tutte le barre fino al margine destro dell’area di visualizzazione.

Strutturazione dei file: