Struggling with tooltips and html

Community Help
1

Hello, I’m new to Observable and d3 - I’ve come from a python background so I’m finding a lot of the js and html confusing. I would be SO grateful for help as I can’t see what I’m doing wrong!

The scatterplot dots are responding to mouse events (changing size and opacity, for instance) but I also want an html tooltip to appear with some of features of my data points (name, number of followers etc).

I would also love to be able to click through on a mouse click event to the twitter account. The click event is working but d.Name is showing up as ‘undefined’ and I’m not sure why.

The notebook is here

I would be so grateful for any advice!

2

Passing e (the d3.event) and d (the data) to the toolTips on. functions, as well as renaming the d3.event e your references to e to d. And it all work nicely.

Using debugger on the .on(‘mouseover’) gave me the clue to what was happening.

3 Likes
3

Thank you so much for this! (I didn’t even know about the debugger so you’ve already given me some more ways to try and improve in observable)

1 Like