Panel Widget Connection

Panel
1

I am trying to bind the widget selector with the graph generated using Plotly, using data from the following GitHub account: mtcars.csv · GitHub. When the selector widget is selected, it does not update the data accordingly.I am using jupyter notebook for your info.

I have triend bindindg it using @pn.depends(selected_am=select.param.value) but it just doesnot update.Here is what I have done so far:

import pandas as pd
import plotly.express as px
import panel as pn
pn.extension()

df = pd.read_csv('mtcars.csv')
auto_manual = list(set(df["am"]))


select = pn.widgets.Select(name='Select', options=auto_manual)

@pn.depends(selected_am=select.param.value)
def updated_graph(selected_am):
    filtered_am = df[df['am'] == selected_am]
    fig = px.scatter(filtered_am, x='disp', y='mpg', color='cyl', title='Displacement vs MPG Scatter Plot with Cylinders')
    return pn.pane.Plotly(fig)

layout = pn.Column(
    select,
    updated_graph
)

layout.servable()
2

Does this work for you? If it works, might be a plotly thing. If not, there might be a browser console error.

import pandas as pd
import panel as pn
import holoviews as hv
pn.extension()

df = pd.DataFrame(
    {
        "mpg": [21.0, 21.0, 22.8, 21.4, 18.7, 18.1, 14.3, 24.4, 22.8, 19.2],
        "am": [1, 1, 1, 0, 0, 0, 0, 0, 0, 1],
    }
)
auto_manual = list(set(df["am"]))


select = pn.widgets.Select(name='Select', options=auto_manual)

@pn.depends(selected_am=select.param.value)
def updated_graph(selected_am):
    filtered_am = df[df['am'] == selected_am]
    return hv.Curve(filtered_am['mpg']).opts(width=600, height=400)

layout = pn.Column(
    select,
    updated_graph
)

layout.servable()
4

Hi There,
Thank you for your reply…Your solution works!
Looks like I had to take a different route to graph the plotly graph in Panel…


import panel as pn
import plotly.express as px
import pandas as pd


pn.extension("plotly")

df = pd.read_csv('mtcars.csv')

select = pn.widgets.Select(name='Select', options=df['am'].unique().tolist())

def update_plot(event):
    selected_value = event.new
    fig = px.scatter(df[df['am'] == selected_value], x='disp', y='mpg', color='cyl', title='Displacement vs MPG Scatter Plot with Cylinders')
    responsive.object=fig

select.param.watch(update_plot, 'value')

fig = px.scatter(df[df['am']==select.value], x='disp', y='mpg', color='cyl', title='Displacement vs MPG Scatter Plot with Cylinders')

responsive = pn.pane.Plotly(fig, height=300)

header = pn.pane.Markdown('## A responsive plot')
column = pn.Column(header, select, responsive, sizing_mode='stretch_width')
component = pn.panel(column)
component.servable()
5

param.watch is no longer the best practice; instead use pn.bind.

import panel as pn
import plotly.express as px
import pandas as pd


pn.extension("plotly")

df = pd.read_csv('mtcars.csv')

select = pn.widgets.Select(name='Select', options=df['am'].unique().tolist())

def update_plot(selected_value):
    fig = px.scatter(df[df['am'] == selected_value], x='disp', y='mpg', color='cyl', title='Displacement vs MPG Scatter Plot with Cylinders')
    return fig

fig = px.scatter(df[df['am']==select.value], x='disp', y='mpg', color='cyl', title='Displacement vs MPG Scatter Plot with Cylinders')

responsive = pn.pane.Plotly(object=pn.bind(update_plot, select.param.value), height=300)

header = pn.pane.Markdown('## A responsive plot')
column = pn.Column(header, select, responsive, sizing_mode='stretch_width')
component = pn.panel(column)
component.servable()
7

Alles Klar…Noted with Thanks :slightly_smiling_face: