How to add graph slider in Bokeh
Bokeh is a Python library used for creating interactive visualizations in a web browser. It provides powerful tools that offer flexibility, interactivity, and scalability for exploring various data insights.
What is a graph slider?
A graph slider is a user interface widget that puts the user in control by allowing them to interactively adjust the plots. It offers run time changes in numeric variables. You can insert sliders in the graphs and explore the variations while changing the values of each variable between a specific range.
Why do we need a graph slider?
Color sliders are widely used to allow users to create their own color that suits their requirements. This interactive feature puts the user in control and improves the overall user experience.
A graph slider is a crucial feature in various domains highly focused on visuals and user interactivity. Hence, it is integrated into widely used software that help to conduct analysis through data visualization. Some other applications are also mentioned below.
Financial planning: Adjust variables like investment return rates, profit rate, and inflation rate to see the impact on financial goals.
Gaming and simulation: Incorporate games to give user control, like adjusting speed and acceleration in racing games.
BCG matrix: Observe sales, profit, and demand over the years to categorize products.
Space flights and plane coordinates: Use the sine function to keep track of the space coordinates and flights. We can track patterns to analyze risk and probabilities by adjusting quantifiable dependency variables.
Let's plot a sine function and manipulate it using difference dependency factors as a slider object.
Required imports
Import the necessary modules from the bokeh library.
import numpy as npfrom bokeh.io import output_file, savefrom bokeh.layouts import columnfrom bokeh.models import ColumnDataSource, CustomJS, Sliderfrom bokeh.plotting import curdoc, figure, show
numpy:To do numerical computations and generate data for the graph plot.bokeh.io:To control the output and display of the plots. We specifically importoutput_fileandsavemethods from.bokeh.layouts:To create complex and structured layouts for our visualizations. We specifically importcolumnto create a vertical layout by stacking multiple objects vertically.bokeh.models:To create highly customized visualizations in Bokeh. We specifically importColumnDataSource,CustomJSandSliderfrom it.bokeh.plotting:To create and customize plots without working directly with the lower-level Bokeh models. We specifically importfigureandshowfrom it.
Example code
In this example, we use the sliders to change the amplitude, frequency, phase, and offset of a simple sine function and observe its effect.
import numpy as np
from bokeh.io import output_file, save
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, CustomJS, Slider
from bokeh.plotting import figure, show
#generate random data
x = np.linspace(0, 10, 500)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))
#create figure
myPlot = figure(y_range=(-10, 10),
width=660,
height=380,
toolbar_location=None,
background_fill_color='white')
#create line
myPlot.line('x', 'y',
source=source,
line_width=3,
line_alpha=0.6)
#create sliders
amp = Slider(start=0.1, end=10, value=2, step=.1, title="Amplitude", bar_color='yellow')
freq = Slider(start=0.1, end=10, value=2, step=.1, title="Frequency", bar_color='purple')
phase = Slider(start=-6.4, end=6.4, value=0, step=.1, title="Phase" , bar_color='blue')
offset = Slider(start=-9, end=9, value=0, step=.1, title="Offset" , bar_color='green')
#javaScript callback
callback = CustomJS(args=dict(source=source, amp=amp, freq=freq, phase=phase, offset=offset),
code="""
const A = amp.value
const k = freq.value
const p = phase.value
const B = offset.value
const x = source.data.x
const y = Array.from(x, (x) => B + A*Math.sin(k*x+p))
source.data = { x, y }
""")
#call callback when change in slider
amp.js_on_change('value', callback)
freq.js_on_change('value', callback)
phase.js_on_change('value', callback)
offset.js_on_change('value', callback)
#display output
output_file("output.html")
show(column(myPlot,amp, freq, phase, offset))Code explanation
Lines 1–5: Import all the necessary libraries and modules.
Line 8: Generates 500 equally spaced values using
linspace()for a range of 0 to 10 on the x-axis.Line 9: Computes the sine of each x-axis value using the
sinfunction and get the y-axis values.Line 11: Use
ColumnDataSourceto create a source and pass thedatadictionary, containing the x-axis and corresponding y-axis values, as a parameter.Lines 14–18: Create a plot using
figure()and specify the axes' range, width, height, toolbar, and fill color of the plot as parameters.Lines 21–24: Create a plot line using
line()and specify the x and y coordinates, source, line width, and transparency as parameters.Lines 27–30: Create
Sliderobjects for amplitudeamp, frequencyfreq, phasephase, and offsetoffsetand specify the properties.start: the minimum and starting range value of the bar.end: the maximum and ing range value of the bar.value: to set the initial value for the default plot.step: to specify the bar precision for moving ahead or backward.title: the label that appears along with the bar.bar_color: the color fill of the bar that increases and decreases dynamically.
Lines 33–42: Create a
callbackwith JavaScript code usingCustomJSthat assigns the amplitude, frequency, phase, and offset values to the variables and returns new x and y coordinates.
Note : Calculate the y-axis values for corresponding x-axis values using :
offset + amplitude * Math.sin(frequency * x-axis value + phase)).
Lines 46–49: Use
js_on_change()to assign the JavaScriptcallbackfunction to thevaluechange event of each slider. Whenever the bars are moved, the callback function is triggered.Lines 52–53: Set the output to
output.htmlto specify the endpoint where the display will appear and useshow()to display the graph slider.
Code output
It displays a sine graph with sliders for adjusting the amplitude, frequency, phase, and offset of it. When we move the sliders, the graph changes accordingly.
Common query
Can we remove phase as a slider object without getting an error?
Free Resources
