悬停在bokeh中突出显示多个hex_tiles [英] Highlighting multiple hex_tiles by hovering in bokeh

问题描述

我尝试在十六进制图中可视化我的数据.为此，我在Figure类中使用python bokeh和相应的hex_tile函数.我的数据属于8个不同类别之一，每个类别都有不同的颜色.下图显示了当前的可视化效果:

I try to visualize my data in a hex map. For this I use python bokeh and the corresponding hex_tile function in the figure class. My data belongs to one of 8 different classes, each having a different color. The image below shows the current visualization:

我想添加一种可能性，当鼠标悬停在元素上时，可以更改元素(最好是其所有类成员)的颜色.

I would like to add the possibility to change the color of the element (and ideally all its class members) when the mouse hovers over it.

我知道，这是有可能的，因为bokeh本身提供了以下示例: https://docs.bokeh.org/en/latest/docs/gallery/hexbin.html

I know, that it is somewhat possible, as bokeh themselves provide the following example: https://docs.bokeh.org/en/latest/docs/gallery/hexbin.html

但是，我不知道该如何自己实现(因为这似乎是hexbin函数的功能，而不是简单的hex_tile函数)

However, I do not know how to implement this myself (as this seems to be a feature for the hexbin function and not the simple hex_tile function)

当前，我在ColumnDataSource中提供数据:

Currently I provide my data in a ColumnDataSource:

source = ColumnDataSource(data=dict(
r=x_row,
q=y_col,
color=colors_array,
ipc_class=ipc_array
))

其中"ipc_class"描述了元素所属的8个类之一. 对于鼠标悬停工具提示，我使用了以下代码:

where "ipc_class" describes one of the 8 classes the element belongs to. For the mouse hover tooltip I used the following code:

TOOLTIPS = [
("index", "$index"),
("(r,q)", "(@r, @q)"),
("ipc_class", "@ipc_class")
]

然后我用以下方法可视化所有内容:

and then I visualized everything with:

p = figure(plot_width=1600, plot_height=1000, title="Ipc to Hexes with colors", match_aspect=True,
       tools="wheel_zoom,reset,pan", background_fill_color='#440154', tooltips=TOOLTIPS)
p.grid.visible = False
p.hex_tile('q', 'r', source=source, fill_color='color')

我希望可视化添加一个功能，将鼠标悬停在一个元素上将导致以下结果之一: 1.通过更改其颜色来突出显示当前元素 2.当鼠标悬停在同一个类上时，通过更改其颜色来突出显示其多个元素 3.将元素悬停在元素上时，更改hex_tile元素(或完整类)外线的颜色

I would like the visualization to add a function, where hovering over one element will result in one of the following: 1. Highlight the current element by changing its color 2. Highlight multiple elements of the same class when one is hovered over by changing its color 3. Change the color of the outer line of the hex_tile element (or complete class) when the element is hovered over

散景可以实现这些功能中的哪些功能?我将如何处理?

Which of these features is possible with bokeh and how would I go about it?

在尝试重新实施Tony的建议后，一旦我的鼠标点击图形，所有元素都会变成粉红色，并且颜色不会变回原样.我的代码如下:

After trying to reimplement the suggestion by Tony, all elements will turn pink as soon as my mouse hits the graph and the color won´t turn back. My code looks like this:

source = ColumnDataSource(data=dict(
    x=x_row,
    y=y_col,
    color=colors_array,
    ipc_class=ipc_array
))

p = figure(plot_width=800, plot_height=800, title="Ipc to Square with colors", match_aspect=True,
           tools="wheel_zoom,reset,pan", background_fill_color='#440154')
p.grid.visible = False
p.hex_tile('x', 'y', source=source, fill_color='color')

###################################

code = ''' 
for (i in cb_data.renderer.data_source.data['color'])
    cb_data.renderer.data_source.data['color'][i] = colors[i];

if (cb_data.index.indices != null) {
    hovered_index = cb_data.index.indices[0];
    hovered_color = cb_data.renderer.data_source.data['color'][hovered_index];
    for (i = 0; i < cb_data.renderer.data_source.data['color'].length; i++) {
        if (cb_data.renderer.data_source.data['color'][i] == hovered_color)
            cb_data.renderer.data_source.data['color'][i] = 'pink';
    }
}
cb_data.renderer.data_source.change.emit();
'''

TOOLTIPS = [
    ("index", "$index"),
    ("(x,y)", "(@x, @y)"),
    ("ipc_class", "@ipc_class")
]

callback = CustomJS(args=dict(colors=colors), code=code)
hover = HoverTool(tooltips=TOOLTIPS, callback=callback)
p.add_tools(hover)
########################################

output_file("hexbin.html")

show(p)

基本上，我从图形功能中删除了工具提示，并将其放到悬停工具上.由于图形中已经有红色，因此将悬停颜色替换为粉红色".由于我不太确定"code"变量中的每一行应该做什么，因此我对此很无奈.我认为可能有一个错误，就是我的ColumnDataSource看起来与Tony的有所不同，并且我不知道如何对第一和第三元素以及第二和第四元素进行分类".对我来说，如果分类是通过"ipc_class"变量完成的，那将是完美的.

basically, I removed the tooltips from the figure function and put them down to the hover tool. As I already have red in my graph, I replaced the hover color to "pink". As I am not quite sure what each line in the "code" variable is supposed to do, I am quite helpless with this. I think one mistake may be, that my ColumnDataSource looks somewhat different from Tony's and I do not know what was done to "classifiy" the first and third element, as well as the second and fourth element together. For me, it would be perfect, if the classification would be done by the "ipc_class" variable.

推荐答案

在前面的帖子中进行讨论之后，这里介绍了针对OP代码(Bokeh v1.1.0)的解决方案.我所做的是:

Following the discussion from previous post here comes the solution targeted for the OP code (Bokeh v1.1.0). What I did is:

1)添加了一个HoverTool

1) Added a HoverTool

2)在HoverTool中添加了一个JS回调:

2) Added a JS callback to the HoverTool which:

• 将十六进制颜色重置为原始颜色(在回调中传递的colors_array)
• 检查当前悬停的十六进制(hovered_index)的索引
• 获取当前悬停的十六进制(hovered_ip_class)的ip_class
• 遍历data_source.data['ip_class']并找到与悬停的六边形具有相同ip_class的所有六边形，并为其设置新的颜色(pink)
• 向BokehJS发送source.change.emit()信号以更新模型

• Resets the hex colors to the original ones (colors_array passed in the callback)
• Inspects the index of currently hovered hex (hovered_index)
• Gets the ip_class of currently hovered hex (hovered_ip_class)
• Walks through the data_source.data['ip_class'] and finds all hexagons with the same ip_class as the hovered one and sets a new color for it (pink)
• Send source.change.emit() signal to the BokehJS to update the model

代码:

from bokeh.plotting import figure, show, output_file
from bokeh.models import ColumnDataSource, CustomJS, HoverTool

colors_array = ["green", "green", "blue", "blue"]
x_row = [0, 1, 2, 3]
y_col = [1, 1, 1, 1]
ipc_array = ['A', 'B', 'A', 'B']

source = ColumnDataSource(data = dict(
    x = x_row,
    y = y_col,
    color = colors_array,
    ipc_class = ipc_array
))

p = figure(plot_width = 800, plot_height = 800, title = "Ipc to Square with colors", match_aspect = True,
           tools = "wheel_zoom,reset,pan", background_fill_color = '#440154')
p.grid.visible = False
p.hex_tile('x', 'y', source = source, fill_color = 'color')

###################################
code = ''' 
for (let i in cb_data.renderer.data_source.data['color'])
    cb_data.renderer.data_source.data['color'][i] = colors[i];

if (cb_data.index.indices != null) {
    const hovered_index = cb_data.index.indices[0];
    const hovered_ipc_class = cb_data.renderer.data_source.data['ipc_class'][hovered_index];
    for (let i = 0; i < cb_data.renderer.data_source.data['ipc_class'].length; i++) {
        if (cb_data.renderer.data_source.data['ipc_class'][i] == hovered_ipc_class)
            cb_data.renderer.data_source.data['color'][i] = 'pink';
    }
}
cb_data.renderer.data_source.change.emit();
'''

TOOLTIPS = [
    ("index", "$index"),
    ("(x,y)", "(@x, @y)"),
    ("ipc_class", "@ipc_class")
]

callback = CustomJS(args = dict(ipc_array = ipc_array, colors = colors_array), code = code)
hover = HoverTool(tooltips = TOOLTIPS, callback = callback)
p.add_tools(hover)
########################################

output_file("hexbin.html")

show(p)

结果:

这篇关于悬停在bokeh中突出显示多个hex_tiles的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！