D3 – linechart issues

Question

new to D3. Trying to create a simple line chart, but can't understand why I have this output. I'm guessing the issue is somewhere in the line constant.

Here's my code:

const margin = {top: 20, right: 20, bottom: 30, left: 50};
        const width = 960 +  margin.left;
        const height = 500 + margin.left;
        const parseTime = d3.timeParse("%Y-%M-%d");
        const type = d => {;
            d.date = parseTime(d.date);
            d.open = +d.open;
            d.high = +d.high;
            d.low = +d.low;
            d.close = +d.close;
            return d;
        }
        const x = d3.scaleTime()
            .range([0, width])

        const y = d3.scaleLinear()
            .range([height, 0]);

        const line = d3.line()
            .x(d => x(d.date))
            .y(d => y(d.high));
        const svg = d3.select('#graph').append('svg')
            .attr('width', width)
            .attr('height', height)
            .append('g')
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        d3.csv('data.csv', type, (error, data) => {
            x.domain(d3.extent(data.map(d => d.date)));
            y.domain(d3.extent(data.map(d => d.high)));


            svg.append("g")
                .attr("class", "axis axis--x")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x).tickFormat((d, i) => {
                    const date = new Date(d);
                    const year = d.getFullYear();
                    const month = d.getMonth() + 1;
                    return `${month}-${year}`
                }))
                ;

            svg.append("g")
                .attr("class", "axis axis--y")
                .call(d3.axisLeft(y))
                .append("text")
                .attr("class", "axis-title")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("High ($)")
                .attr('fill', '#000');


            svg.append('path')
                .datum(data)
                .attr('class', 'line')
                .attr('d', line);
        });

CSV

date,open,high,low,close,volume,adjClose
2016-07-29,31.280001,31.43,31.110001,31.139999,47695300,31.139999
2016-07-28,31.200001,31.309999,31.08,31.25,30297500,31.25
[...]

What exactly am I doing wrong? The ticks seem ok and the data is ok as well. It looks as if the output is somehow randomized.

Answer 1

It was just a small mistake, very easy to do: %m (lowercase m) is month as a decimal number, but %M (uppercase m) is minutes.

According to the API:

%m - month as a decimal number [01,12]. %M - minute as a decimal number [00,59].

So, your const should be:

const parseTime = d3.timeParse("%Y-%m-%d");