How to get min and max of rangeslider

rh1 · December 1, 2023, 6:55am

Hi All,
how to get min and max from range slider so I can use that value to select dataframe and plot it?
example:

import numpy as np
import pandas as pd
import panel as pn

import holoviews as hv
import hvplot.pandas # noqa
pn.extension('tabulator')

penguins = pd.read_csv('https://datasets.holoviz.org/penguins/v1/penguins.csv')
penguins = penguins[~penguins.sex.isnull()].reset_index().sort_values('species')

filter_table = pn.widgets.Tabulator(penguins)

slider = pn.widgets.RangeSlider(start=0, end=100,step=10, name='Bill Length Filter')
filter_table.add_filter(slider, 'bill_length_mm')

# define plot function
def plot_scatter(category):
    plot_df = penguins[penguins['bill_length_mm'] >= slider.param.value]
    plot = plot_df.hvplot.scatter(x='bill_depth_mm', y='flipper_length_mm')
    return plot

# define callback function
@pn.depends(slider.param.value)
def update_plot(category):
    plot = plot_scatter(category)
    return plot
pn.Row(
    pn.Column(slider),
    filter_table,
    update_plot
)

error message:
TypeError: ‘>=’ not supported between instances of ‘float’ and ‘Range’

if put as

def plot_scatter(category):
    plot_df = penguins[penguins['bill_length_mm'] == slider.param.value]
    plot = plot_df.hvplot.scatter(x='bill_depth_mm', y='flipper_length_mm')
    return plot

there is no error but not data plotted in the graph when interactively slide the length.

kindly please advise how to fix this.
Goal is interactively change tabulator and graph based on range slider

petegordon · December 1, 2023, 1:30pm

I think I see it working with this:

I used slider.value, and it is a tuple of low, high.


import panel as pn
import pandas as pd

# Define your Panel layout here
layout = pn.Column('# Hello, World!')

penguins = pd.read_csv('https://datasets.holoviz.org/penguins/v1/penguins.csv')
penguins = penguins[~penguins.sex.isnull()].reset_index().sort_values('species')

filter_table = pn.widgets.Tabulator(penguins)

slider = pn.widgets.RangeSlider(start=0, end=100,step=10, name='Bill Length Filter')
filter_table.add_filter(slider, 'bill_length_mm')


# define plot function
def plot_scatter(category):
    print(penguins)
    plot_df = penguins[penguins['bill_length_mm'] >= slider.value[0]]
    plot_df = plot_df[plot_df['bill_length_mm'] <= slider.value[1]]
    #plot = plot_df.hvplot.scatter(x='bill_depth_mm', y='flipper_length_mm')
    plot = plot_df.plot.scatter(x='bill_depth_mm', y='flipper_length_mm')
    return plot

# define callback function
@pn.depends(slider.param.value)
def update_plot(category):
    plot = plot_scatter(category)
    return plot


row = pn.Row(
    pn.Column(slider),
    filter_table,
    update_plot
)

layout.append(row)
layout.servable()

rh1 · December 2, 2023, 5:08pm

hi @petegordon , thanks for your advice, however when I run your code no plot come out.
Here is the result

did you get the same result?
thanks

petegordon · December 3, 2023, 11:01am

I did get the same result. No plot.

Sorry, I stopped and shared when I saw the dataframe used in the tabulator filter correctly using the range slider.

The update_plot used in the row would be a function pointer added to the row. I think that’s why the plot doesn’t show up. I’d first try to make the plot outside of the functions (“global”) and then recreate it with the new dataframe every time range slider is updated.

The example at the end of this page shows using matplotlib and bind with a float slider…
https://panel.holoviz.org/getting_started/core_concepts.html

Another good example is here:
https://panel.holoviz.org/getting_started/build_app.html#visualize-a-subset-of-the-data

petegordon · December 3, 2023, 12:11pm

Last comment on plotting in general. I like sharing this decision tree for plotting. But, I’m not as experienced in charts/plots as others…

https://holoviz.org/_images/holoviz.mermaid.svg

Found here…
https://holoviz.org/background.html

petegordon · December 3, 2023, 3:57pm

Here’s a full and cleaner solution, more like your original and after some ChatGPT digging. The solution is using Plotly and showing the Tabulator also:

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

# Ensure Panel works with Plotly in a notebook
pn.extension('plotly')

penguins = pd.read_csv('https://datasets.holoviz.org/penguins/v1/penguins.csv')
penguins = penguins[~penguins.sex.isnull()].reset_index().sort_values('species')

# Create DataFrame
df = pd.DataFrame(penguins)

table_of_penguins = pn.widgets.Tabulator(df)

# Create a RangeSlider for the 'X' axis
x_range_slider = pn.widgets.RangeSlider(
    name='bill_length_mm Range', 
    start=df['bill_length_mm'].min(), 
    end=df['bill_length_mm'].max(), 
    value=(df['bill_length_mm'].min(), df['bill_length_mm'].max()),
    align='center'
)

# Function to create the scatter plot
def create_scatter_plot(x_range):
    filtered_df = df[(df['bill_length_mm'] >= x_range[0]) & (df['bill_length_mm'] <= x_range[1])]
    table_of_penguins.value = filtered_df
    fig = px.scatter(filtered_df, x='bill_length_mm', y='flipper_length_mm', color='sex', title='Sample Plotly Scatter Plot of Penguines')
    return fig

# Create a reactive function that updates the plot based on the RangeSlider
@pn.depends(x_range_slider.param.value)
def update_plot(x_range):
    return create_scatter_plot(x_range)

# Create a Panel layout with the RangeSlider and the scatter plot
scatter_plot_row = pn.Column(pn.Row(x_range_slider, update_plot), table_of_penguins)

# Show the app (use .show() if running outside of a Jupyter environment)
layout = pn.Column()
layout.append(scatter_plot_row)
layout.servable()

rh1 · December 4, 2023, 6:44am

hi @petegordon awesome, thanks alot for your help and digging via chatgpt. Perfect.
using another plot (hvplot) can be like this

import hvplot.pandas  
import pandas as pd
import numpy as np
import plotly.express as px
import panel as pn

pn.extension('tabulator')

penguins = pd.read_csv('https://datasets.holoviz.org/penguins/v1/penguins.csv')
penguins = penguins[~penguins.sex.isnull()].reset_index().sort_values('species')

# Create DataFrame
df = pd.DataFrame(penguins)

table_of_penguins = pn.widgets.Tabulator(df)

# Create a RangeSlider for the 'X' axis
x_range_slider = pn.widgets.RangeSlider(
    name='bill_length_mm Range', 
    start=df['bill_length_mm'].min(), 
    end=df['bill_length_mm'].max(), 
    value=(df['bill_length_mm'].min(), df['bill_length_mm'].max()),
    align='center'
)

# Function to create the scatter plot
def create_scatter_plot(x_range):
    filtered_df = df[(df['bill_length_mm'] >= x_range[0]) & (df['bill_length_mm'] <= x_range[1])]
    table_of_penguins.value = filtered_df
    fig = filtered_df.hvplot.scatter(x='bill_length_mm', y='flipper_length_mm', color='sex', title='Sample Hvplot Scatter Plot of Penguines')
    return fig

# Create a reactive function that updates the plot based on the RangeSlider
@pn.depends(x_range_slider.param.value)
def update_plot(x_range):
    return create_scatter_plot(x_range)

# Create a Panel layout with the RangeSlider and the scatter plot
scatter_plot_row = pn.Column(pn.Row(x_range_slider, update_plot), table_of_penguins)

# Show the app (use .show() if running outside of a Jupyter environment)
layout = pn.Column()
layout.append(scatter_plot_row)
layout.servable()

thanks alot again.

rh1 · December 4, 2023, 8:17am

hi @petegordon , I just found which one make the previous code not showing the plot, first we don’t import hvplot, second is in the definition of plot function, here is same code with the previous original one and change the defintion as per your solution:

import hvplot.pandas
import panel as pn
import pandas as pd

# Define your Panel layout here
layout = pn.Column('# Hello, World!')

penguins = pd.read_csv('https://datasets.holoviz.org/penguins/v1/penguins.csv')
penguins = penguins[~penguins.sex.isnull()].reset_index().sort_values('species')

#df = pd.DataFrame(penguins)
filter_table = pn.widgets.Tabulator(penguins)

slider = pn.widgets.RangeSlider(
    name='bill_length_mm Range', 
    start=0, 
    end=100, 
    step=10,
    #value=(start,end),
    align='center'
)
filter_table.add_filter(slider, 'bill_length_mm')


# define plot function
def plot_scatter(category):
    #print(penguins)
    plot_df = penguins[(penguins['bill_length_mm'] >= category[0]) & (penguins['bill_length_mm'] <= category[1])]
    #plot = plot_df.hvplot.scatter(x='bill_depth_mm', y='flipper_length_mm')
    plot = plot_df.hvplot.scatter(x='bill_depth_mm', y='flipper_length_mm')
    return plot

# define callback function
@pn.depends(slider.param.value)
def update_plot(category):
    plot = plot_scatter(category)
    return plot


row = pn.Row(
    pn.Column(slider),
    filter_table,
    update_plot
)

layout.append(row)
layout.servable()

thanks