Scatterplot in D3 is cut off heightwise

JavaScript
1

Tell us what’s happening:
For some reason (even though I’ve set height to 500px) my scatterplot is being displayed almost as a straight line, with the top half of my dots being completely cut off. Can someone help me figure out whats going on?

Your code so far
https://codepen.io/seth-alan-burleson/pen/XWjjzNo

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36.

Challenge: Visualize Data with a Scatterplot Graph

Link to the challenge:

2

If you add a console.log() to where you set the (x, y) coordinates of the circles,

.attr('cx', (d) => {
  console.log(d.Year);
  return x(d.Year);
})

you can see that the data has a year (like 2001) for x and a time (like “39:40”) for y. The year appears to be an integer in the console and the time a string, so your linear scale for the y-axis doesn’t know what to do with that string. You may need to parse the time into a linear (numerical) value and/or investigate using a d3.scaleTime() scale.