1. Adding LassoSelectTool
Now that we have a solid grasp of Bokeh's configuration tools and their benefits, we will be introducing Bokeh's own data structure and how we can use it to create a HoverTool.
2. Inspectors
In the last video, we discussed some configuration tools and briefly mentioned Inspectors. There are two tools in this group. First is CrosshairTool, which allows the movement of a mouse to draw a cross-hair annotation over the plot. CrosshairTool is outside the scope of this course, but the Inspectors documentation page is linked in the slide for more information.
The other Inspector is HoverTool, which allows us to display columns of interest when we hover the mouse over an observation.
3. Bokeh data source objects
In order to set up a Hovertool, we must convert our data to Bokeh's own data structure. Bokeh does this automatically when we pass data to glyphs, but when creating a HoverTool, we need to manually complete this process. Also, by doing this ourselves, it can actually speed up our workflow, particularly when generating multiple plots from the same dataset.
To do this, we import ColumnDataSource from bokeh-dot-models. We then create a variable named source, calling ColumnDataSource and passing our dataset to the data keyword argument. When we add glyphs, we now only need to include the column names as strings when setting x and y, rather than writing the name of the DataFrame every time. We add a third argument called source, which we set equal to the variable we created, also called source. Here is the output.
4. Setting up the HoverTool
We set up a HoverTool by creating a list of tuples, specifying the information we wish to display. Recall that we create a tuple using parentheses, separating elements with a comma. Convention is to name this TOOLTIPS, all capitals. Each tuple in TOOLTIPS holds two strings, the first being the text we wish to display and the second holding the column of interest, with an at symbol in front. We can repeat this for as many columns as we like.
To add the HoverTool to the figure, we pass our variable named TOOLTIPS to the tooltips argument when instantiating the figure. We then add glyphs, generate our HTML file and display the plot.
5. HoverTool in action
The plot now shows the player's name and the team they play for when we hover over different glyphs.
6. Displaying numeric data
We can use the HoverTool to display numeric data, such as points and assists, by adding those columns to TOOLTIPS. We again add tooltips when creating the figure. Notice the numeric data displays to three decimal places by default?
7. Formatting the HoverTool
What if we want to change how the HoverTool displays our data, such as rounding numeric values to the nearest two decimal places?
We include curly brackets inside of the strings denoting the numeric columns, writing zero-point-two-f inside. Doesn't it look much better?
8. Let's practice!
Now let's use the HoverTool to provide more information for people interacting with our visualizations!