Adding a circle element on multi-line chart for each datapoint D3 JS

I have the following code and am looking to add a circle element for each data point, however, am getting the error:

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

Any help is greatly appreciated!

  var w = 960;
  var h = 500;
  var margin = { top: 75, right: 75, bottom: 75, left: 75 };
  var width = w - margin.left - margin.right,
      height = h - margin.top - margin.bottom;

// append svg element to the body of the page
// set dimensions and position of the svg element
  var svg = d3.select("body").append("svg")
      .attr("id", "line_chart")
      .attr("width", w)
      .attr("height", h);
  var container = svg.append("g")
      .attr("id", "container")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.dsv(",", pathToCsv, function (d) {
      if (+d.year >= 2015 && +d.year <= 2019) {
          return {
              name: d.name,
              year: +d.year,
              rating: Math.floor(+d["average_rating"]),
              users: +d["users_rated"]
          }
      }
  }).then(function (data) {
      console.log(data);
  
  // Define x axis scale for line chart
      var xScale = d3.scaleLinear()
          .domain([0, d3.max(data, function (d) { return d.rating; })])
          .range([0, width]);
      var xAxis = d3.axisBottom(xScale)
            .ticks(10);

      var yScale = d3.scaleLinear()
          .domain([0, d3.max(filtered_data[2], function (d) { return d.count; })])
          range([height, 0]);
      var yAxis = d3.axisLeft(yScale);
      y_axis.call(yAxis);

      // d3's line generator
      var line = d3.line()
          .x(function (d) { return xScale(d.rating); })
          .y(function (d) { return yScale(d.count); })

      // colors list
      var colors = ["#1f77b4", "#ff7f0e", "#17becf", "#bcbd22", "#bcbd22"];

      // Add each line to line chart
      lines.selectAll("line-paths")
          .data(filtered_data)
          .enter()
          .append("path")
          .attr("d", function (d) { return line(d); })
          .style("fill", "none")
          .style("stroke", function (d, i) { return colors[i]; });

      circles.selectAll("line-circles")
              .data(filtered_data)
              .enter()
              .append("circle")
              .attr("cx", function (d) { return xScale(d.rating); })
              .attr("cy", function (d) { return yScale(d.count); })
              .attr("r", 3);

For reference, my data is formatted as follows:

Data Setup

so essentially its a nested array with 5 lines and need to append 50 total elements.