Welcome back. Bokeh comes with a number of interactive tools that can be used to report information, to change plot parameters such as zoom level or range extents, or to add, edit, or delete glyphs. So far, we have seen gestures, which are tools that respond to single gestures,  such as the Pan tool or the WheelZoom tool. In particular, for each type of gesture, one tool can be active at any given time, and the active tool is indicated on the toolbar by a highlight next to the tool icon. 

But there are other types of tools in bokeh. An example is the family of `Inspectors`. Inspectors are passive tools that report information about the plot, based on the current cursor position. Any number of inspectors may be active at any given time. The inspectors menu in the toolbar allows users to toggle the active state of any inspector. The most famous member of this family is by far the Hover Tool.

The hover tool is used to generate a tabular tooltip containing information for a particular row of the dataset. Typically, the labels and values are supplied as a list of tuples made up of label and value. However, we can employ the hover tool as a glyph, which is a cool way to bring dynamic interaction to our plot.

Let’s now move into our Jupyter playground. I am defining a plot object here in the following fashion: instead of defining line glyphs, I use circle glyphs and I plot the relationship between date and close from the apple data frame source we saw in the previous lecture.

What I want to do now is employ hover tools to bring dynamic interaction to our plot. To do so, we firstly import HoverTools from bokeh models. We then initialize a HoverTool object by setting tooltips equal to None and we also set mode equal to "vline". The argument “mode” is, by default, set to "mouse": in this mode, informational tooltips associated with individual glyphs are displayed only when the mouse is directly over a glyph.

In our case, we set this argument to be equal to "vline": this means that when we navigate over a glyph, then all the tooltips associated with glyphs intersecting a vertical line are shown. For further details, please visit the documentation online.

We assign this object to the variable “hover”. We then add the new tool by applying the add_tools function to the plot. We copy and paste the previous plot here for simplicity and then apply the add_tools function to the plot object. We pass the hover object inside this.

We then set the size of the circle equal to 4, and we fill the marker colour with a light grey color. We also set the transparency to be equal to 0.1, and last but not least, we are going to add two extra arguments. The first one is hover_fill_color, which we’ll set to be equal to `firebrick` - this basically controls the color of the glyphs as soon as we inspect the element - and we set the hover_alpha argument equal to 0.5 - this controls the transparency as we hover on a glyph. We finally show the plot.

Now you can see that we have brought interactivity to the plot. To get a better understanding of what is going on, we can increase the size - say, equal to 8 - and now you can see that the figure is really dynamic, and we can see the effect of the mode argument: as we hover the mouse pointer over a glyph, there is a dynamic interaction with it.

We can also add the glyphs line to give a better understanding of the data in the plot. That is very simple. We just add the line glyphs and we pass the same coordinates as for the circle glyphs. The result is as follows.

However, the HoverTool is used by default to display further information whenever a user hovers the mouse pointer over glyphs. Instead of passing None to tooltips, we’ll pass a list of tuples here. Each tuple has two elements. The first is a string that will label a row in the tooltip that is displayed and the second is a format string that will be shown as the associated value for that row.

Let us define a new hover object and instead of just passing a tooltip equal to none, we pass a list of tuples, where each tuple - as I said before - will contain a string that essentially denotes the object we wish to display in the hover - for instance the date - and the second is nothing more than the column from which we are picking information. To do that, we use this special character @ associated with the column name from the data source.

Like this, we are explicitly telling bokeh to display information about the Trading Date - extracted from the data source - so that each time we move over a particular glyph, the trading date will be shown under the field “Date” inside the tooltip.

Note that we also specify the argument mode as equal to “mouse” in this case - which is the default option. We then create a plot object (following the same logic we have used so far) and this has been done for you. But now we add the new hover object to the tools, and if we hover the mouse over a glyph, some information is shown inside a box.

Obviously, we can always add more information. So instead of just using Date inside the tooltip, we can even pass the tuple related to Volume and Close, referring to the corresponding columns inside the Apple CDS. The result is as follows: we see now that in the box, we have three different annotations corresponding to the elements inside the tooltips.

We clearly see that as soon as we hover the mouse over a glyph, the desired information for that particular example is shown. However, we can spot a few potential problems here: the date is not properly shown and therefore must be formatted as datetime - indeed, by default, values for fields are displayed in a basic numeric format - that’s why we do not see a proper date in the plot; we can also add the currency in front of the “Close” price information; and finally we can aggregate the volume number and express it in millions.

First, let’s fix the date: to do so we use the formatters argument inside the HoverTool. This is a dictionary which requires the column from our CDS as a key - in our case “@Date” - and the format we wish to have for that particular column inside the hover as the value - which, in our case, is “datetime.”

Note that we also need to specify the fields in the most appropriate way. For example, fields can be modified by appending a format at to the end in curly brackets - in this case we write it as follows: ('Date', '@Date{%F}').

We run the cell and we now see that the datetime field is now properly displayed inside the information box. To display the currency in front of the price value, we specify the dollar sign inside the value in tooltips in this way: “$@Close{0.2f}”, and note that we also tell bokeh to display maximum two decimals.

As for the volume, we specify “@Volume{0.00 a}” to tell bokeh to display the number in terms of millions. A simple run of the above shows the desired output.

That concludes this lecture on Inspectors.