D3 Area chart

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

  let parseDate = d3.timeParse("%Y-%m-%d")
  data.forEach(d => {
    d.date = parseDate(d.date)
    d.value = +d.value
  })

  let xScale = d3.scaleTime()
                 .domain(d3.extent(data, d => d.date))
                 .range([0, innerWidth])
  
  let yScale = d3.scaleLinear()
                 .domain([0, d3.max(data, d => d.value)])
                 .range([innerHeight, 0])

  let areaFunc = d3.area().x(d => xScale(d.date))
                          .y1(d => yScale(d.value))
                          .y0(yScale(0)) 
  
  innerArea.append("path")
           .attr("fill", "steelblue")
           .attr("d", areaFunc(data))

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