0

I have a glyph that's a series of Circles. I want to click on one point and change the colour / alpha of the unselected glyphs such that each unselected glyph has a custom colour based on it's relationship with the selected point.

For example, I'd want the closest points to the selected point to have alpha near to 1 and the furthest to have alpha near to 0.

I've seen other questions where the unselected glyphs have different alphas, but the alphas are independent of what is selected. Is it possible to do this without using JavaScript?

Edited for more details:

The specific dataset I'm working on is a dataset of a bike sharing system, with data on trips made between specific stations. When I click on a specific station, I want to show the destination stations to which users go to when they start from the station selected. For n stations, the data thus has a n * n format: for each station, we have the probability of going to every other station. Ideally, this probability will be the alpha of the unselected stations, such the most popular destinations would have alpha near to 1, and the less popular ones an alpha near to 0.

2
  • Hi. Nothing in seems impossible to me to do in Bokeh and purely with a Python callabck. To decompose your problem, you need a tap tool to get the information on the point that was clicked on, a callback which can sort all of the other glyph by euclidean distance, and then change the alpha of each glyph based on that sorting. None of this is likely to be impossible in Bokeh. It will however be difficult. It would help us more if you came back with a more specific question a specific part of the methodology you choose to solve this problem. Best of luck.
    – DuCorey
    Jul 14, 2017 at 3:31
  • @DuCorey I have added more details, in my case I guess I'll use a tap tool and a callback that'll refer to the database of probabilities between stations.
    – yujia21
    Jul 14, 2017 at 15:07

1 Answer 1

0

In order to avoid tripling (or quintupling) memory usage in the browser, Bokeh only supports setting "single values" for non-selection colors and alphas. That is, non-selection properties can't be vectorized by pointing them at a ColumnDataSource column. So there's only two options I can think of:

  • Split the glyphs into different groups of glyphs, that each have a different different nonselection_color. This might be feasible if you only have a few groups. Of course now you have to partition your data to have e.g. five calls to p.circle instead of one, but it would entirely avoid JS.

  • Use a tiny amount of JavaScript in a CustomJS callback. You can have an additional column in the CDS that provides the non-selected colors. When a selection happens, the CustomJS callback switches the glyph's normal color field to point to the other column and when a selection is cleared, changes it back to the "normal" field.

1
  • I've edited the question for more details, seeing as there are many bike stations, it is probably not practical to have a glyph per station. I'll use a callback, thanks!
    – yujia21
    Jul 14, 2017 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.