Creating a simple Range Slider in Bokeh

Bokeh is a powerful data visualization library in Python that helps create interactive and unique visualizations for the web. A RangeSlider widget allows users to select a range of values interactively, making it useful for filtering data or controlling plot parameters. This tutorial will guide you through creating a simple range slider in Bokeh.

Key Benefits of Range Slider

• Interactive RangeSlider provides an interactive way for users to adjust the range of a plot, which can be particularly useful for exploring data and identifying trends.

• Range control The RangeSlider allows users to control the range of the data displayed on a plot, making it easier to zoom in on specific areas of interest.

• Easy to use RangeSlider is easy to use and can be added to a Bokeh plot with just a few lines of code.

• Customizable RangeSlider can be customized in terms of appearance and behavior, allowing developers to create sliders that fit their specific needs.

• Integration with other widgets RangeSlider can be integrated with other Bokeh widgets to create more complex and interactive visualizations.

Prerequisites

Before creating a range slider, ensure you have the following installed ?

• Python 3.7 or higher

• Bokeh library: pip install bokeh

• NumPy library: pip install numpy

Basic Range Slider Example

Let's start with a simple example that creates a range slider with a basic line plot ?

from bokeh.plotting import figure
from bokeh.layouts import column
from bokeh.models import RangeSlider
from bokeh.io import show
import numpy as np

# Create sample data
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Create a plot
plot = figure(title="Simple Range Slider Example", width=600, height=400)
plot.line(x, y, line_width=2, color='blue')

# Create a range slider
range_slider = RangeSlider(
    start=0, 
    end=10, 
    value=(2, 8), 
    step=0.1, 
    title="X-axis Range"
)

# Arrange in layout
layout = column(plot, range_slider)

# Display the plot
show(layout)

Interactive Range Slider with Callback

To make the range slider functional, we need to add a callback that updates the plot when the slider values change ?

from bokeh.plotting import figure
from bokeh.layouts import column
from bokeh.models import RangeSlider, ColumnDataSource
from bokeh.io import curdoc
import numpy as np

# Create sample data
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Create data source
source = ColumnDataSource(data=dict(x=x, y=y))

# Create plot
plot = figure(title="Interactive Range Slider", width=600, height=400)
line = plot.line('x', 'y', source=source, line_width=2, color='blue')

# Create range slider
range_slider = RangeSlider(
    start=0, 
    end=10, 
    value=(0, 10), 
    step=0.1, 
    title="Filter X-axis Range"
)

# Callback function
def update_plot(attr, old, new):
    start_val, end_val = range_slider.value
    # Filter data based on slider values
    mask = (x >= start_val) & (x <= end_val)
    filtered_x = x[mask]
    filtered_y = y[mask]
    
    # Update data source
    source.data = dict(x=filtered_x, y=filtered_y)

# Attach callback to slider
range_slider.on_change('value', update_plot)

# Create layout
layout = column(plot, range_slider)

# Add to document
curdoc().add_root(layout)

Complete Example with Multiple Features

Here's a comprehensive example that demonstrates various range slider features ?

from bokeh.plotting import figure
from bokeh.layouts import column
from bokeh.models import RangeSlider
from bokeh.io import show
import numpy as np

# Generate sample data
x = np.linspace(0, 20, 200)
y1 = np.sin(x)
y2 = np.cos(x)

# Create figure
plot = figure(
    title="Range Slider with Multiple Series",
    x_axis_label="X",
    y_axis_label="Y",
    width=700,
    height=400
)

# Add multiple lines
plot.line(x, y1, legend_label="sin(x)", line_width=2, color='red')
plot.line(x, y2, legend_label="cos(x)", line_width=2, color='blue')
plot.legend.location = "top_right"

# Create range slider with custom styling
range_slider = RangeSlider(
    start=0,
    end=20,
    value=(5, 15),
    step=0.5,
    title="Select X-axis Range",
    width=650
)

# Create layout
layout = column(plot, range_slider)

# Show the result
show(layout)

RangeSlider Parameters

Common Use Cases

• Data filtering Filter time series data by date range

• Zoom control Control the visible range of a plot

• Parameter adjustment Adjust model parameters interactively

• Data exploration Explore different sections of large datasets

Conclusion

Range sliders in Bokeh provide an intuitive way to create interactive visualizations where users can control data ranges. They're easy to implement and can be customized for various use cases. For interactive functionality, remember to use callbacks and serve your application with bokeh serve or add it to curdoc().