Struggling with tooltips and html

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!

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.


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