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])

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

L’oggetto xScale può essere usato per ottenere il valore basato sull’intervallo impostato con range() semplicemente passando il valore da adattare.

Modificare l’intervallo massimo del metodo range() usando valori diversi da 670. Se si vuole modificare anche il valore minimo è necessario impostare anche l’attributo x dei rettangoli:

Strutturazione dei file: