1. Select widgets
Now let's discuss the Select widget.
2. Select widget
If we want our stakeholders to be able to choose from a list of options, resulting in changes to a plot, we can use the Select widget!
Select allows us to provide different categories, such as an NBA player's position, which then produces an updated plot.
3. JavaScript
Before we discuss the code, it's important to note that we will be calling Bokeh's CustomJS function in order to produce a Select widget.
This uses JavaScript to enable the interaction of the widget and the figure. We have actually been working with JavaScript under the hood when we used the js_link method, but now we will explicitly write JavaScript. We will explain the code for CustomJS calls, but it is outside the scope of this course to cover JavaScript in detail.
4. Setting up the Select widget
To set up a Select widget, we import Select and CustomJS from bokeh-dot-models. We create our glyphs for each category, but set visibility of the west glyphs to False, so by default, they do not display on the figure.
We then create a list, menu, that holds the options our Select widget will display to stakeholders.
5. Building an interactive function
To build interactions, we call CustomJS. We first assign a dictionary to the args argument containing scatter_1 and scatter_2, which are set equal to east_glyph and west_glyph, respectively.
We then provide a JavaScript function to the code argument, surrounding it in triple quotes. We initially set visibility of scatter_1 and scatter_2 to true.
We then use an if-else statement so that scatter_2's visibility should be updated to false if the value of the Select widget is equal to East. Using else, we then set scatter_1's visibility to false if a value other than East is chosen with our Select widget.
We create our Select widget, passing our menu to the options argument, setting the initial value as East, and giving a title of Conference.
Finally, we call Select's js_on_change method, providing its value attribute, followed by our JavaScript function called callback.
6. The result!
Check it out! We don't even need a legend as the category is specified in the widget!
7. Selecting from three options
We can apply the same workflow to line plots. Here we create line glyphs for each region in the Melbourne dataset, setting the east and south glyphs to invisible.
8. Building three interactions
Now we update all three sets of glyphs to visible inside our CustomJS call. We then repeat our if-else loop for each option in our widget and call js_on_change.
9. Select widget with line plots
See how easy it is to scale the number of options in a Select widget!
10. Using Select for different figures
How about using Select to choose which figure gets displayed? This is useful if we want to display metrics that are measured on different scales, such as stock price versus market cap.
We add a column for market cap to the stocks DataFrame, and subset for eBay stocks. We create one figure and set of line glyphs for the price, market cap, and volume columns. Finally, we set the second and third figure and glyphs to invisible.
11. Building figure interaction
In our callback, we include three figures and three glyphs. We write if-else statements for each value of the Select widget, starting with Price, as displayed here.
12. Completing the callback
We complete the callback code, then call the js_on_change method with value and callback. Lastly, we create a layout containing our three figures in a single set of square brackets.
13. Switching figures
We can now display completely different data with a single click of the mouse!
14. Let's practice!
Now let's build some Select widgets to go with our plots!