You provide intelligible descriptions and examples
In a sudden twist I’ve realised I’ve provided a terrible example: I’ve provided data that’s easily confused and I haven’t accurately described what I’m trying to do.
The heatmap works as intended, and I’m trying to show this same data on a line graph to be affected by the same slider.
For the line graph:
- lines: different lines for each
attribute
- y axis: the values of whichever column of ‘1’, ‘2’, and ‘3’ is selected. Note these column names were previously easily confused with
period
values. - x axis: period values.
Updated code which still doesn’t work in the way I hoped it would:
from pandas import *
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import LinearColorMapper, CustomJS, Slider, ColumnDataSource
from bokeh.palettes import Viridis256
from bokeh.plotting import figure
df = DataFrame({'attribute': ['Y', 'Y', 'Y', 'Y', 'Z', 'Z', 'Z', 'Z']
, 'period': [100, 200, 300, 400, 100, 200, 300, 400]
, '1': [1, 37, 44, 13, 41, 51, 18, 14]
, '2': [10, 3, 44, 53, 20, 9, 18, 14]
, '3': [80, 37, 22, 13, 13, 44, 18, 14]})
df['period'] = df['period'].astype(str)
periods = df.period.unique().tolist()
attributes = df.attribute.unique().tolist()
selectable_columns = ['1', '2', '3']
source=ColumnDataSource(df)
active = 1
values_select = Slider(title="Values", start=1, end=3, step=1, value=active)
color_mapper = LinearColorMapper(palette=Viridis256, low=df[str(active)].min(), high=df[str(active)].max())
heatmap_fig = figure(x_range=periods, y_range=attributes)
renderer = heatmap_fig.rect(x="period", y="attribute", width=1, height=1, line_color=None, source=source, name=str(active),
fill_color={'field': str(active), 'transform': color_mapper})
line_fig = figure()
for a in attributes:
source = ColumnDataSource(a)
line_fig.line(x='period'
, y=str(a)
, legend_label=str(a)
, source=source)
values_select.js_on_change('value', CustomJS(args=dict(renderer=renderer, heatmap_fig=heatmap_fig, line_fig=line_fig), code="""\
const active = cb_obj.value.toString();
const data = renderer.data_source.data[active];
renderer.name = active;
const {transform} = renderer.glyph.fill_color;
renderer.glyph.fill_color = {field: cb_obj.value, transform: transform};
heatmap_fig.reset.emit()
line_fig.reset.emit()
"""))
show(column(values_select, heatmap_fig, line_fig))