Getting the error in yScale d3

I am getting the following error and unable to figure out the root cause of the issue.:

d3.v5.min.js:2 Error: attribute d: Expected number, “M-6,NaNH0.5VNaNH-6”.
(anonymous) @ d3.v5.min.js:2
each @ d3.v5.min.js:2
attr @ d3.v5.min.js:2

15Error: attribute transform: Trailing garbage, “translate(0,NaN)”.

I have checked my syntax several times.
Below is my code:


Not enough info here to find the problem. Do you have a link to a codepen or similar?

I am trying to create a multiline chart for ratings from 2015-2019.

it should look like this

I am filtering the years for 2015-2019 and nesting for 2 levels year and average_rating and trying to get counts by ratings and year.
my code link is


So, the original error looks to be coming from the first (or one of) translate statements used in your transform attributes. Whichever one it is, it is missing or misinterpreting one of the numbers you are trying to pass it. Your yScale range should be an array like [height, 0], but that is not a fatal error, it just messes up the axis.

As your code stands now, it’s missing all the HTML and any installed version of D3 on codepen. The data file also appears to have been local and for the project to work, you will need to fetch it from a URL or add it as a JS object. I managed to get both axes working with mostly your code (not sure why you had time on the x-axis…), but I’m not sure they were what you intended and I had to hack out all the references to your data. My suggestion is to get to the point where you can draw a blank SVG on codepen, then get the data (fetched or as an object), then draw an axis correctly and so on.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.