attribute height and y: Expected length, “NaN”

i have this d3 code and when i run it, it display an error which is

Error: attribute y: Expected length, “NaN”.

Error: attribute height: Expected length, “NaN”.

and it display the plot without any line
what the problem, please help i’m a begginer at d3
also i’m trying to plot multiple lines and can’t do it
i thought this code might work but there is an error

// Set our margins
var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 60
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Our X scale
var x = d3.scaleBand()
    .rangeRound([0, width], .1);

// Our Y scale
var y = d3.scaleLinear()
    .rangeRound([height, 0]);

// Our color bands
var color = d3.scaleOrdinal()
    .range(["#308fef", "#5fa9f3", "#1176db"]);

// Use our X scale to set a bottom axis
var xAxis = d3.axisBottom()
    .scale(x);

// Smae for our left axis
var yAxis = d3.axisLeft()
    .scale(y)
    .tickFormat(d3.format(".2s"));

// Add our chart to the document body
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Fetch data via SODA from the Chicago data site
d3.csv("mn.csv?$select=Year,Under20,f20to24,f25to29,f30to34,f35to39,f40to44,f45andover", function (error, data) {
    // Make sure our numbers are really numbers
    data.forEach(function (d) {
        d.Year = d.Year;
        d.Under20 = d.Under20;
        d.f20to24 = d.f20to24;
        d.f25to29 = d.f25to29;
        d.f30to34 = d.f30to34;
        d.f35to39 = d.f35to39;
        d.f40to44 = d.f40to44;
        d.f45andover = d.f45andover;
    });

    console.log(data);
   // console.log(data.split(",").join(""))

    // Use our values to set our color bands
    color.domain(d3.keys(data[0]).filter(function (key) {
        return key !== "Year";
    }));

    data.forEach(function (d) {
        var y0 = 0;
        d.types = color.domain().map(function (name) {
            return {
                name: name,
                y0: y0,
                y1: y0 += +d[name]
            };
        });
        d.total = d.types[d.types.length - 1].y1;
    });

    // Sort by year
    data.sort(function (a, b) {
        return a.Year - b.Year;
    });

    // Our X domain is our set of years
    x.domain(data.map(function (d) {
        return d.Year;
    }));

    // Our Y domain is from zero to our highest total
    y.domain([0, d3.max(data, function (d) {
        return d.total;
    })]);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Ridership");

    var year = svg.selectAll(".Year")
        .data(data)
        .enter().append("g")
        .attr("class", "g")
        .attr("transform", function (d) {
            return "translate(" + x(d.Year) + ",0)";
        });

    year.selectAll("rect")
        .data(function (d) {
            return d.types;
        })
        .enter().append("rect")
        .attr("width", x.bandwidth())
        .attr("y", function (d) {
            return y(d.y1);
        })
        .attr("height", function (d) {
            return y(d.y0) - y(d.y1);
        })
        .style("fill", function (d) {
            return color(d.name);
        });

    var legend = svg.selectAll(".legend")
        .data(color.domain().slice().reverse())
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function (d, i) {
            return "translate(0," + i * 20 + ")";
        });

    legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

    legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function (d) {
            return d;
        });
});