Display information when hovering over the bubbles

Community Help
1

Hello everyone, I hope you’re all well.
I have one more question :slight_smile: I’d like to add some information to my bubble chart when I hover over the bubbles, i.e. the number of certificates and the name of the business sector (because I don’t have enough space on my X axis).
I’ve tried to write some code to do this but it doesn’t work and I don’t understand why. I’ve tried several different ways to no avail.

You’ll find my code in the “Display information when hovering over bubbles” section at the bottom of the page.

Is anyone willing to help me?

PS: I have to admit that I’m still a beginner on this platform.

Vanessa :slight_smile:

2

You mean adding a tool tip?
Here is how to do it and a few other things I find you had wrong in your code:

image
image2380×1368 304 KB

  • tip: true and title: ... can be used to add tooltip with custom content
  • to custom a option’s value for each data point, you just need passing in either the channel/column name, or the modifier function. So instead of <option name>: <data set>.map(<modifier function>), you just need <option name>: < modifier function >

There are more to explore:
Dot mark | Observable Plot
Tip mark | Observable Plot

as well as this series of tutorial:

3

Wow! Super, it works and thank you very much for the very interesting documentation. You’re perfect!

In relation to this graph, I have one last question:

I’m trying to replace the sectors of activity on my X axis with numbers because my X axis is illegible. However, when I replace the sectors with numbers, my information bubbles also have numbers instead of the full sector name.
How can I have numbers from 1 to 40 on my X axis and the exact name of the sector in my information bubbles? You’ll find my 2 tests in the section “Try to replace the business sectors on the X axis with numbers” on the same link.

PS: in the documentation with the Olympians that you provided. His X axis corresponds to his information bubble, so the problem for me is different.

Vanessa :slight_smile:

4

Your conversion of X to numbers seems fine I think in that section, you used text instead of title to specify the content of tooltip, that’s why you lost your customized tooltip content.

You can see how title and/or channel are used here:
Tip mark | Observable Plot

Besides that, you may find this easier to do:
x: (_, index) => index
instead of your current
tableData3.findIndex
cause I know plot options can take in a function, and the first parameter is each data point, second parameter is its index.

But I don’t know where this is documented. I only read this in other people’s Notebook.

1 Like
5

it’s documented here Transforms | Observable Plot

  • an accessor function - called as type.from(data, value)
2 Likes
6

Hello,
Merci beaucoup à vous deux. Je vais essayer avec cela :slight_smile: