Scatterplot tooltip is not showing, possibly selecting the wrong element


I’ve been trying to add a simple tooltip to my scatter plot: D3 Scatterplot UMAP Features / Oliver / Observable
It registers mouseovers when I select “.scatter” but it does not otherwise (with this or adding custom classes/id attributes to SVG).

If I pass it directly as an arrow function I can select with select(this) but it still does not show.
I also tried mousenter/over/move, they all register and print to the console.

Another edit: after several more tries, I am able to display text, however using function (event, d) the data element d does not get parsed and is undefined for some reason.

I can append plain text elements, and rects but just the html/div doesn’t work show.

Can someone point to me what I’m doing wrong?
I’ve tried several things and tutorials but I’m a bit stuck now.

Thanks a lot for any pointers and tips!

Hey @Oliver – thanks for sharing your question. Tooltips with D3 are definitely tricky to work with!

In your current code, I see this logic:

  • When you mouseover a circle… (.on("mouseover", function(event, d) {)…
  • Assign an attribute test to the circle
  • Also select all elements with class .scatter and append a pieces of text to them (.append('text')).

I think there are a few issues with this:

  • I’m not sure you can append a text element to a circle element
  • The position and content of the text isn’t specified

Before digging into the ways to solve tooltips in D3 (which requires some custom code), can I suggest an alternative using Plot? Alternative UMAP Scatterplot Using Plot / Observable / Observable

Let me know if that works for you,


1 Like

Hi Mike!

Thanks a lot for giving the alternative suggestion.
I am actually using this to prototype visualizations for use in a react app, I couldn’t get observable plots working well in that.

I have a bit of a workaround now using rects and texts and just appending them in a group.
This kind of works.

Thanks again!