How to change color (and other options) of other circles on hover using CustomJS callbacks

Community Support
,
1

I’m building off of this example; by that I mean I copied it exactly for my purposes.

My question is this: the graph that I have is representative of a physical structure, and there are over 5000 points. The code works great (takes a second to load, but I don’t really care), but because there are so many, the lines that get generated might travel through other circles, so it can be unclear if a given circle is being called out.

How do I make it so that the circles that get pointed to change to a different color, then change back to their original color when they’re no longer being pointed to? I’m assuming that it needs to be handled in the JScallback, but I’m not a guru with Python and I don’t know any JavaScript.

2

No JS code is required just to change the visual appearance on hover, that is purely a configuration. See:

https://docs.bokeh.org/en/2.4.3/docs/user_guide/styling.html#hover-inspections

The example you link uses a CustomJS because it is demonstrating how it is possible to do something more sophisticated than changing appearance in response to a hover event (e.g. manipulate other glyphs or data)

3

I’m trying to play around with that example, but I’m getting the following error:

bokeh sample data directory does not exist, please execute bokeh.sampledata.download()

Edit: never mind, I got the dataset working

4

Okay, I’ve played around with that example, but it seems like I’m only able to change the color of the circle over which the cursor is hovering; I want to be able to change the color of that circle AND all of the other circles that now have a line segment between them and the hovered-over circle.

5

OK that really was not evident in your question. I assumed (naturally) that “pointed to” meant “pointed to by my mouse pointer”.

Do you actually have graph data? If so you should probably at Bokeh’s support for graph data:

https://docs.bokeh.org/en/2.4.3/docs/user_guide/graph.html

The linked example dates from before graph support existed, and is somewhat contrived. If you have graph data, and use real graph renderers, then you can use node and edge interaction polices to control things like this:

https://docs.bokeh.org/en/2.4.3/docs/user_guide/graph.html#interaction-policies

Otherwise, you will indeed need to manage all the tedious bookkeeping manually in a CustomJS.

It’s not really possible to offer much more concrete without some code, i.e a Minimal Reproducible Example to go from.

1 Like
6

I apologize, “pointed to” was quite ambiguous.

I can supply, but it’ll take me a second to sanitize the data. Alternatively, the code from the URL in the original post works; I just adopted that code for my usage, but the actual appearance of the lines is identical.

7

Oh, shoot dang, that graph data might be exactly what I’m looking for, lol. I’ve spent the past two days working on this, and I never came across that stuff. Lemme dive into that real quick.

1 Like
8

Is there a better way to import XY coordinates than what I found here?

https://stackoverflow.com/questions/64986306/how-to-plot-a-networkx-graph-using-the-x-y-coordinates-of-the-points-list

9

Apologies, I don’t really understand your question, or how that SO topic might relate (the topic only seems to concern turning on axes, and also for matplotlib)

10

I initially couldn’t find an example where folks were using the “pos” argument, so I couldn’t figure out how to plot points on an XY plane. Then I found the “pos” argument.

11

Okay, back to my original question: how do I change the color of glyphs with CustomJS?

More generally, where can I find a list of parameters/settings of glyphs that can be affected by CustomJS callbacks?

12

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.