D3 v5: Линия не отображается для линейного графика, а галочки не отображаются на оси Y

Question

Обновление, вот сообщение об ошибке в консоли: Ошибка: атрибут d: Ожидаемое число, «M0, NaNL21.654801022…».

Я уверен, что это довольно простой вопрос d3, и я посмотрел в других ответах, но ничего не опубликовано, похоже, не помогает, галочки не отображаются на оси y, но они отлично работают на оси x. Вдобавок это должен быть линейный график, но линия не рисуется.

Вот код:

var margin = {top: 10, right: 40, bottom: 150, left: 70},
width = 760 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom; 

var w = width + margin.left + margin.right;
var h = height + margin.top + margin.bottom;

var svg = d3.select("body").append("svg") // this appends a new SVG element to body
    .attr("width", w) // set the width 
    .attr("height", h) // set the height
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// x scale will handle time
var xScale = d3.scaleTime().range([0,width]);

// y scale will handle energy consumption values
var yScale = d3.scaleLinear().range([height,0]);

// Define X and Y AXIS
var yAxis = d3.axisLeft(yScale);
var xAxis = d3.axisBottom(xScale); 

var parseTime = d3.timeParse("%Y"); 


function rowConverter(data) {
    return {
        year : parseTime(data.year),
        value : +data.average // the + operator parses strings into numbers
    };
}

// line generator function
var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return xScale(d.year); })
    .y(function(d) { return yScale(d.average); })


d3.csv("moreDummyData.csv",rowConverter).then(function(data){


yScale.domain([0,d3.max(data, function(d) {return d.average; })]); 

xScale.domain(d3.extent(data, function(d) { return d.year; })); 


// Draw xAxis
svg.append("g") // add a new svg group element
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxis)
    .selectAll("text")
    .attr("dx", "-.8em")
    .attr("dy", ".25em")
    .attr("text-anchor", "end");

// Draw yAxis
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .selectAll("text")
    .attr("dx", "-.8em")
    .attr("dy", ".25em")
    .attr("text-anchor", "end");

// add a title for the yAxis
svg.append("text") // add a new svg "text" element
    .attr("text-anchor", "end")
    .attr("transform", "rotate(-90)") // turn it on its side
    // position the title in space
    .attr("y", -margin.left+20) 
    .attr("x", -margin.top-75)
    // give it text and style
    .text("ADD TITLE")
    .attr("font-family", "Times")
    .attr("font-size", "16px"); 

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

И вот как выглядит результат с этим кодом:

вывод кода

Вот как выглядят данные:

год, среднее значение

1971,30

1972,34

1973,29

1974,28

1975,31

1976,35