Question

我有一个包含多列的数据框。前两列是x和y坐标，其余列是（x，y）对的不同属性值。

import pandas as pd
import numpy as np
df = pd.DataFrame()
df['x'] = np.random.randint(1,1000,100)
df['y'] = np.random.randint(1,1000,100)
df['val1'] = np.random.randint(1,1000,100)
df['val2'] = np.random.randint(1,1000,100)
df['val3'] = np.random.randint(1,1000,100)

print df.head()

     x    y  val1  val2  val3
0  337  794   449   969   933
1   19  563   592   677   886
2  512  467   664   160    16
3   36  112    91   230   910
4  972  572   336   879   860

在Bokeh中使用customJS，我想通过提供一个下拉菜单来更改二维热图中的颜色值。

from bokeh.plotting import figure
from bokeh.models import ColumnDataSource
from bokeh.models import LinearColorMapper
from bokeh.palettes import RdYlBu11 as palette

p = figure()
source =   ColumnDataSource(df)
color_mapper = LinearColorMapper(palette=palette)
p.patches('x', 'y', source=source,\
          fill_color={'field': 'val1', 'transform':color_mapper})

show(p)

以上命令绘制颜色图，其颜色由列'val1'确定。我想根据下拉菜单中选择的内容绘制不同的列（val1，val2或val3）。

我可以通过

在散景中创建一个下拉小部件

 from bokeh.models.widgets import Select
 select = Select(title="Option:", value="val1", options=["val1","val2","val3"])

但是，我不太确定如何使用所选值来使用回调来更新绘图。

有人可以在这里给我指导吗？

感谢。

Answer 1

我添加了一个示例，其中注释与代码内联。主要的重要步骤是编写每次窗口小部件上的选定选项更改时执行的javascript代码。代码只需要重新分配哪些列设置为数据源的'y'列的值。

另一个问题是您的数据只是x和y点。补丁字形将需要不同的数据结构，该结构定义补丁的边界。我相信有更好的方法可以在散景中制作热图，堆栈溢出和散景文档应该有很多例子。

import pandas as pd
import numpy as np

from bokeh.io import show
from bokeh.layouts import widgetbox,row
from bokeh.models import ColumnDataSource, CustomJS

df = pd.DataFrame()
df['x'] = np.random.randint(1,1000,1000)
df['y'] = np.random.randint(1,1000,1000)
df['val1'] = np.random.randint(1,1000,1000)
df['val2'] = np.random.randint(1,1000,1000)
df['val3'] = np.random.randint(1,1000,1000)

from bokeh.plotting import figure
from bokeh.models import LinearColorMapper
from bokeh.palettes import RdYlBu11 as palette

p = figure(x_range=(0,1000),y_range=(0,1000))
source = ColumnDataSource(df)
source_orig = ColumnDataSource(df)
color_mapper = LinearColorMapper(palette=palette)
p.rect('x', 'y', source=source,width=4,height=4,
          color={'field': 'val1', 'transform':color_mapper})

from bokeh.models.widgets import Select
select = Select(title="Option:", value="val1", options=["val1","val2","val3"])

callback = CustomJS(args={'source':source},code="""
        // print the selectd value of the select widget - 
        // this is printed in the browser console.
        // cb_obj is the callback object, in this case the select 
        // widget. cb_obj.value is the selected value.
        console.log(' changed selected option', cb_obj.value);

        // create a new variable for the data of the column data source
        // this is linked to the plot
        var data = source.data;

        // allocate the selected column to the field for the y values
        data['y'] = data[cb_obj.value];

        // register the change - this is required to process the change in 
        // the y values
        source.change.emit();
""")

# Add the callback to the select widget. 
# This executes each time the selected option changes
select.callback = callback
show(row(p,select))

散景 - 使用customJS绘制不同的列

1 个答案: