D3 Bar Chart Bas

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

let margin = { top: 20, right: 20, bottom: 40, left: 100 }
let innerWidth = 670 - margin.left - margin.right
let innerHeight = 300 - margin.top - margin.bottom

let innerArea = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

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, innerWidth]);
  
  let yScale = d3.scaleBand()
                 .domain(data.map(d => d.animal))
                 .range([innerHeight, 0])
                 .padding(0.1)

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

  let yAxis = d3.axisLeft(yScale)

  innerArea.append("g")
           .style("font-size", "14px")
           .call(yAxis)

  let xAxis = d3.axisBottom( xScale )
  
  innerArea.append("g")
           .style("font-size", "14px")
           .attr("transform", "translate(0," + innerHeight + ")")
           .call( xAxis )
})