D3 Scatterplot

    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("TwoNum.csv").then(data => {

  let xScale = d3.scaleLinear()
                 .domain([0, 4000])
                 .range([0, innerWidth])
  
  let yScale = d3.scaleLinear()
                 .domain([0, 500000])
                 .range([innerHeight, 0])

  innerArea.selectAll("circle")
           .data(data)
           .join("circle")
           .attr("cx", d => xScale(d.GrLivArea))
           .attr("cy", d => yScale(d.SalePrice))
           .attr("r", 2)
           .attr("fill", "rgb(105 179 162 / 0.33)")

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