Добавление взаимодействия к тепловой карте, чтобы показать еще один боке-график на основе выбора - PullRequest
Новая
       13

Добавление взаимодействия к тепловой карте, чтобы показать еще один боке-график на основе выбора

0 голосов
/ 16 октября 2018

Я пытаюсь добавить взаимодействие в тепловую карту (используя прямоугольник), используя CustomJS, чтобы показать другой график боке на основе выбранного значения.Это то, что я пробовал 

heat_map_df_stack = pd.DataFrame(heat_map_df.stack(), columns=['rate']).reset_index()
....
issue_heat_map = figure(title="",
       x_range=issues, y_range=list(reversed(products)),
       x_axis_location="above", plot_width=400, plot_height=400,
       tools=TOOLS, toolbar_location='below',
       tooltips=[('Product & Issue Id', '@Product @Issue'), ('Issue Count', '@rate')],
       name='issue_heat_map')
....   

issue_heat_map.rect(x="Issue", y="Product", width=1, height=1,
   source=heat_map_df_stack,
   fill_color={'field': 'rate', 'transform': mapper},
   line_color=None)
....

taptool = issue_heat_map.select(type=TapTool)
taptool.callback = CustomJS(args = dict(source = ""), code =
"""
console.log('test')
console.log(cb_obj)
var inds = cb_obj.selected;
window.alert(inds);
""")

При нажатии прямоугольника или выделения, сейчас ничего не происходит.

[Редактировать]: я обновил приведенный выше код.Теперь я могу видеть консольный журнал и оповещения, но понятия не имею, как получить выбранное значение из тепловой карты.

1 Ответ

0 голосов
/ 16 октября 2018

Вот версия, использующая сервер bokeh.Код является адаптацией примера тепловой карты из галереи bokeh . 

from math import pi
import pandas as pd
import numpy as np

from bokeh.io import curdoc
from bokeh.models import LinearColorMapper, BasicTicker, PrintfTickFormatter, ColorBar
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource
from bokeh.layouts import gridplot
from bokeh.sampledata.unemployment1948 import data

data['Year'] = data['Year'].astype(str)
data = data.set_index('Year')
data.drop('Annual', axis=1, inplace=True)
data.columns.name = 'Month'

years = list(data.index)
months = list(data.columns)

# reshape to 1D array or rates with a month and year for each row.
df = pd.DataFrame(data.stack(), columns=['rate']).reset_index()
source = ColumnDataSource(df)

# this is the colormap from the original NYTimes plot
colors = ["#75968f", "#a5bab7", "#c9d9d3", "#e2e2e2", "#dfccce", "#ddb7b1", "#cc7878", "#933b41", "#550b1d"]
mapper = LinearColorMapper(palette=colors, low=df.rate.min(), high=df.rate.max())

TOOLS = "hover,save,pan,box_zoom,reset,wheel_zoom, tap"

p = figure(title="US Unemployment ({0} - {1})".format(years[0], years[-1]),
           x_range=years, y_range=list(reversed(months)),
           x_axis_location="above", plot_width=900, plot_height=400,
           tools=TOOLS, toolbar_location='below',
           tooltips=[('date', '@Month @Year'), ('rate', '@rate%')])

p.grid.grid_line_color = None
p.axis.axis_line_color = None
p.axis.major_tick_line_color = None
p.axis.major_label_text_font_size = "5pt"
p.axis.major_label_standoff = 0
p.xaxis.major_label_orientation = pi / 3

heatmap = p.rect(x="Year", y="Month", width=1, height=1,
       source=source,
       fill_color={'field': 'rate', 'transform': mapper},
       line_color=None)

color_bar = ColorBar(color_mapper=mapper, major_label_text_font_size="5pt",
                     ticker=BasicTicker(desired_num_ticks=len(colors)),
                     formatter=PrintfTickFormatter(format="%d%%"),
                     label_standoff=6, border_line_color=None, location=(0, 0))
p.add_layout(color_bar, 'right')

# Adding the tap interaction + plot
other_source = ColumnDataSource({'x': range(10), 'y': range(10)})
other_plot = figure(title="Other Plot")
other_line = other_plot.line(x='x', y='y', source=other_source)


def update(attr, old, new):
    if not old:
        old = [1]
    if new:
        other_source.data.update(y=np.array(other_source.data['y'])/old[0]*new[0])


source.selected.on_change('indices', update)

curdoc().add_root(gridplot([[p, other_plot]]))

Важной частью являются последние несколько строк, где я настраиваю второй график и добавляю функцию обновленияизменить наклон линии на втором графике в соответствии с выбранным прямоугольником из тепловой карты.Для запуска этого примера необходима сборка 1.0 bokeh.Руководство по установке можно найти здесь

...