How do I link Plots and Tables?

Panel
1

How do I link Plots and Tables

A lot of times when I create a Dashboard my users would like to be able to zoom or select in one or more plots and also see the details of the selected data in a table.

There is also a feature request like this on Github https://github.com/holoviz/holoviews/issues/4505

So how do I create this?

My attempt is below based on a combination of Holoviews Linked Brushing and Panel. Do you have a better suggestion?

linked-brushing

import pandas as pd
import holoviews as hv
from holoviews.selection import link_selections
import panel as pn
import param
hv.extension('bokeh')

COLOR = "#6dcfcd"

data = {"x": [1,2,3,4,5], "y": [2,4,5,7,10], "info": ["Holoviews", "and", "Panel", "are", "awesome"]}
df = pd.DataFrame(data)
dataset = hv.Dataset(df)

scatter = hv.Scatter(dataset, "x", "y").opts(color=COLOR, width=450, size=25, default_tools=[], tools=['box_select'])

bars = hv.Bars(dataset, "x", "y").opts(color=COLOR, width=450, alpha=0.5, line_width=0, default_tools=[], tools=['box_select'],)

link = link_selections.instance()
plots = link(scatter+bars)

bar = pn.Row(pn.pane.Markdown("# Panel and Holoviews - Linked Plots and Tables", sizing_mode="stretch_width"), sizing_mode="stretch_width", background=COLOR)

@param.depends(link.param.selection_expr)
def selection_table(_):
    return hv.Table(dataset.select(link.selection_expr)).opts(width=900, height=200)

app = pn.Column(bar, plots, selection_table, height=600)
app
6 Likes
2

Can .hvplot be used with linking?

hvplot is a convenient way to generate holoview plots, but it works on DataFrames and not hv.Datasets.

When I naively use hvplot in the above example, instead of raw raw holoviews, the linking works, even though the hvplot Dataset is not the same as the bar or table Dataset.

But when I add a ‘by’ argument and legend, the select coloring no longer works and the bar chart does not update. Interestingly, the table updates.

Just wrapping the hvplot with link_selection is enough to mess up the legend colors.

link = link_selections.instance()
plots = link(scatter)

Is there a way to use linking with hvplot and legends?

import pandas as pd
import holoviews as hv
from holoviews.selection import link_selections
import hvplot.pandas
import panel as pn
import param
hv.extension('bokeh')

COLOR = "#6dcfcd"

data = {"x": [1,2,3,4,5], "y": [2,4,5,7,10], "info": ["Holoviews", "and", "Panel", "are", "awesome"]}
df = pd.DataFrame(data)
dataset = hv.Dataset(df)

scatter = hv.Scatter(dataset, "x", "y").opts(color=COLOR, width=450, size=25, default_tools=[], tools=['box_select'])

### Override scatter using hvplot
scatter = df.hvplot.scatter(x="x", y="y", by="info", width=450, size=25)


bars = hv.Bars(dataset, "x", "y").opts(color=COLOR, width=450, alpha=0.5, line_width=0, default_tools=[], tools=['box_select'],)

link = link_selections.instance()
plots = link(scatter+bars)

bar = pn.Row(pn.pane.Markdown("# Panel and Holoviews - Linked Plots and Tables", sizing_mode="stretch_width"), sizing_mode="stretch_width", background=COLOR)

@param.depends(link.param.selection_expr)
def selection_table(_):
    return hv.Table(dataset.select(link.selection_expr)).opts(width=900, height=200)

app = pn.Column(bar, plots, selection_table, height=600)
app
1 Like
3

Listening in. Would like to learn to do it too.

image
image948×600 24 KB

I’m thinking that when a solution is found this example wrapped into the FastGridTemplate with Custom Colors would be a very nice example for the Panel Gallery.

4

A slight tangential question, @Marc
Is it possible to attach a @param.depends like construct to obtain the selected rows of a hv.Table or param.DataFrame?

5

Hi @Nithanaroy

Would the example provided here Link Table and Curves - #2 by ahuang11 be what you are looking for?

6

Yes, it solves my problem. Thanks Marc.

Just for my knowledge, do you know the use case of param.DataFrame as a user selector, like other params?