D3.js Scatterplot Graph Improvement

Hi folks!

Here’s my scatterplot that passes the tests: https://codepen.io/stan-stan/pen/ZEorRxV.

But I noticed that there are actually a few places where the times and years are exactly the same, which is weird because the graph title says 35 fastest times but you can’t see 35 points. Additionally, there are places where the points are too close to see well so I made an improved version that combines collisions: https://codepen.io/stan-stan/full/ExLPPKB

My code itself is a bit spaghetti, but I did end up creating a number of functions to break it up for the improved version.

One thing I realized is why the examples use divs for the tooltips instead of rendering them inside the SVG. It’s much easier to format a <div> tooltip than a <g> tooltip. I wanted my graphs to be somewhat scalable though so that’s why I went with everything inside the SVG.

1 Like