d3v5 area chart

by Alaksandar Jesus Gene

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

JavaScript

data = [
    {
      "date": "2007-04-23",
      "close": 93.24
    },
    {
      "date": "2007-04-24",
      "close": 95.35
    }];
    //Update 1
    data = data.map((item) => ({date:d3.timeParse("%Y-%m-%d")(item.date), value:item.close}))
            data.y = "$ Close";
            
            data.forEach(function(item){
            console.log(d3.timeParse("%Y-%m-%d")(item.date))
            })
    //Update 1        
    
       height = 500;
    width = 500;
    margin = ({ top: 20, right: 20, bottom: 30, left: 30 });
    x = d3.scaleTime()
        .domain(d3.extent(data, d => d.date))
        .range([margin.left, width - margin.right])
    y = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)]).nice()
        .range([height - margin.bottom, margin.top])
    xAxis = g => g
        .attr("transform", `translate(0,${height - margin.bottom})`)
        .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
    yAxis = g => g
        .attr("transform", `translate(${margin.left},0)`)
        .call(d3.axisLeft(y))
        .call(g => g.select(".domain").remove())
        .call(g => g.select(".tick:last-of-type text").clone()
            .attr("x", 3)
            .attr("text-anchor", "start")
            .attr("font-weight", "bold")
            .text(data.y))
    area = d3.area()
        .x(d => x(d.date))
        .y0(y(0))
        .y1(d => y(d.value))
    const svg = d3.select('svg')
        .attr('width', width)
        .attr('height', height)

    svg.append("path")
        .datum(data)
        .attr("fill", "steelblue")
        .attr("d", area);

    svg.append("g")
        .call(xAxis);

    svg.append("g")
        .call(yAxis);