D3 Scatterplot raggruppato

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

let margin = { top: 20, right: 20, bottom: 30, left: 70 }
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("iris.csv").then(data => {

  let xScale = d3.scaleLinear()
                 .domain([4, 8])
                 .range([0, innerWidth])
  
  let yScale = d3.scaleLinear()
                 .domain([0, 7])
                 .range([innerHeight, 0])
  
  let colors = d3.scaleOrdinal()
                 .domain(["setosa", "versicolor", "virginica"])
                 .range(["#44015488", "#21908d88", "#fde72588"])

  innerArea.selectAll("circle")
           .data(data)
           .join("circle")
           .attr("cx", d => xScale(d.Sepal_Length))
           .attr("cy", d => yScale(d.Petal_Length))
           .attr("r", 5)
           .attr("fill", d => colors(d.Species))

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