Hi,
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.
Update:
I can append plain text elements, and rects but just the html/div doesn’t work show.
Why?
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,
Mike
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!