CODEWITHSUNDEEP
pythonbokeh
PyRsquared
PyRsquared

Reputation: 7338

How to display various hover identifiers on a plot using Bokeh?

If we take this geographic example from Bokeh documentation, we see that the Texas county name appears in a text box as you hover the mouse over the county, along with the unemployment rate and Longitude and Latitude.

enter image description here

How would we get multiple other identifiers apart from Name into that text box? For simplicity and for the sake of argument, let's say you had Mayor and Largest Town as data and wanted to display them too under Name. Taking the code in the example above, say we had something like (please refer to the link for all the code, I am just using a sample here)

...
county_xs = [county["lons"] for county in counties.values()]
county_ys = [county["lats"] for county in counties.values()]
county_mayor = [county['mayor'] for county in counties.values()]

source = ColumnDataSource(data=dict(
x=county_xs,
y=county_ys,
name=county_names,
identifier_2 = county_mayor # guessing here
rate=county_rates,
))

...

hover = p.select_one(HoverTool)
hover.point_policy = "follow_mouse"
hover.tooltips = [
    ("Name", "@name"),
    ("Unemployment rate)", "@rate%"),
    ("Mayor", "@identifier_2"), # guessing here
    ("(Long, Lat)", "($x, $y)"),
]

Although this doesn't work because identifier_2 is unknown / not defined.

Upvotes: 2

Views: 1367

Answers (1)

Pierre Chevallier
Pierre Chevallier

Reputation: 754

How to proceed

You can add reference to other variables to the hover tool by first passing them to the ColumnDataSource indeed.

  1. First add the data to the ColumnDataSource (making sure it the variable has the same dimension as the other variables)
  2. Add the source to your figure
  3. Reference it inside the hover tool afterwards

The code

from bokeh.io import show
from bokeh.models import (
    ColumnDataSource,
    HoverTool,
    LogColorMapper
)
from bokeh.palettes import Viridis6 as palette
from bokeh.plotting import figure

from bokeh.sampledata.us_counties import data as counties
from bokeh.sampledata.unemployment import data as unemployment

palette.reverse()

counties = {
    code: county for code, county in counties.items() if county["state"] == "tx"
}

county_xs = [county["lons"] for county in counties.values()]
county_ys = [county["lats"] for county in counties.values()]
# Creating a fake mayor variable
county_mayor = ["Mayor of " + county["name"]  for county in counties.values()]

county_names = [county['name'] for county in counties.values()]
county_rates = [unemployment[county_id] for county_id in counties]
color_mapper = LogColorMapper(palette=palette)

# We add the mayor variable
source = ColumnDataSource(data=dict(
    x=county_xs,
    y=county_ys,
    name=county_names,
    rate=county_rates,
    mayor=county_mayor,
))

TOOLS = "pan,wheel_zoom,reset,hover,save"

p = figure(
    title="Texas Unemployment, 2009", tools=TOOLS,
    x_axis_location=None, y_axis_location=None
)
p.grid.grid_line_color = None

p.patches('x', 'y', source=source,
          fill_color={'field': 'rate', 'transform': color_mapper},
          fill_alpha=0.7, line_color="white", line_width=0.5)

hover = p.select_one(HoverTool)
hover.point_policy = "follow_mouse"
# And we reference the mayor in the tooltip
hover.tooltips = [
    ("Name", "@name"),
    ("Unemployment rate)", "@rate%"),
    ("(Long, Lat)", "($x, $y)"),
    ("Mayor", "@mayor")
]

show(p)

Output

The expected result should be something like this : enter image description here

Reference

Reference for hover tool at this link from the documentation.

Upvotes: 3

Related Questions