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
  });

  let xScale = d3.scaleLinear()
                 .domain([0, d3.max(data, d => d.lifespan)])
                 .range([0, 670])
  
  let yScale = d3.scaleBand()
                 .domain(data.map(d => d.animal))
                 .range([300, 0])
                 .padding(0.1)

  svg.selectAll("rect")
     .data(data)
     .join("rect")
     .attr("y", d => yScale(d.animal))
     .attr("width", d => xScale(d.lifespan))
     .attr("height", yScale.bandwidth())
})

L’oggetto yScale può essere usato per ottenere la posizione basata sull’intervallo impostato con range() semplicemente passando il valore da adattare.

La larghezza delle bande viene calcolata automaticamente e restituita dal metodo bandWidth().

Modificare gli intervalli passati al metodo range() provando anche a invertirli.

Modificare il valore passato a padding() evitando di arrivare a 1.0.

Strutturazione dei file: