How do you make the RangeTool in Bokeh select over multiple plots? - python

In reference to
https://docs.bokeh.org/en/latest/docs/gallery/range_tool.html
where you have the range tool control the main top chart.
Can you modify this so that you can select over several charts? So far what I tried displays the charts but only the chart I synch with x_range is the chart that moves. I tried passing a list, a series, nothing works. Can someone assist?
Sample code:
import numpy as np
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, RangeTool
from bokeh.plotting import figure
from bokeh.sampledata.stocks import AAPL, GOOG
from bokeh.layouts import gridplot
dates = np.array(AAPL['date'], dtype=np.datetime64)
source = ColumnDataSource(data=dict(date=dates, aapl=AAPL['adj_close'], goog=GOOG['adj_close']))
p1 = figure(plot_height=300, plot_width=800, tools="xpan", toolbar_location=None,
x_axis_type="datetime", x_axis_location="above",
background_fill_color="#efefef", x_range=(dates[1500], dates[2500]))
p1.line('date', 'aapl', source=source)
p1.yaxis.axis_label = 'Price'
p2 = figure(plot_height=300, plot_width=800, tools="xpan", toolbar_location=None,
x_axis_type="datetime", x_axis_location="above",
background_fill_color="#efefef", x_range=(dates[1500], dates[2500]))
p2.line('date', 'goog', source=source)
p2.yaxis.axis_label = 'Price'
p = gridplot([[p1,p2]])
select = figure(title="Drag the middle and edges of the selection box to change the range above",
plot_height=130, plot_width=1600, y_range=p1.y_range,
x_axis_type="datetime", y_axis_type=None,
tools="", toolbar_location=None, background_fill_color="#efefef")
range_tool = RangeTool(x_range=p1.x_range)
range_tool.overlay.fill_color = "navy"
range_tool.overlay.fill_alpha = 0.2
select.line('date', 'aapl', source=source)
select.line('date', 'goog', source=source)
select.ygrid.grid_line_color = None
select.add_tools(range_tool)
select.toolbar.active_multi = range_tool
show(column(p, select))
Output:

You will also have to configure all the plots that you want to be synchronized, with the same range e.g.
p2 = figure(..., x_range=p1.x_range)

Related

Python Bokeh tool - How to display hovertool with datetime formatter xaxis from bokeh?

I using the bokeh vbar chart tool for my energy datas. If I use the tuple(string,string,..) for xaxis then it successfully worked. But I use the datetimetickformatter for xaxis then hover tool never display.
My sample code is here:
from bokeh.io import show, output_file
from bokeh.models import ColumnDataSource, DatetimeTickFormatter,HoverTool
from bokeh.plotting import figure
from datetime import datetime
output_file("bar_colormapped.html")
dt1=datetime(2018,8,1)
dt2=datetime(2018,8,2)
dt3=datetime(2018,8,3)
dt4=datetime(2018,8,4)
dt5=datetime(2018,8,5)
dt6=datetime(2018,8,6)
fruits = [dt1,dt2,dt4,dt5,dt6]
counts = [5, 3, 4, 4, 6]
source = ColumnDataSource(data=dict(fruits=fruits, counts=counts))
tooltips=[
("val", "#counts")
]
p = figure(plot_height=350, toolbar_location=None, title="Fruit Counts",x_axis_type='datetime',tooltips=tooltips)
p.vbar(x='fruits', top='counts', width=0.9, source=source)
p.xaxis.formatter=DatetimeTickFormatter(
minutes=["%M"],
hours=["%H:%M"],
days=["%d/%m/%Y"],
months=["%m/%Y"],
years=["%Y"],
)
p.xgrid.grid_line_color = None
p.y_range.start = 0
p.y_range.end = 9
p.legend.orientation = "horizontal"
p.legend.location = "top_center"
show(p)
This is in the documentation:
https://docs.bokeh.org/en/latest/docs/user_guide/tools.html#formatting-tooltip-fields
Presumably in your specific case, something like:
hover = HoverTool(tooltips=[('date', '#fruits{%F}'), ('val', '#counts')],
formatters=dict(fruits='datetime'))
p.add_tools(hover)
Also your bars are far too thin for hit testing. The units on a datetime scale is milliseconds since epoch, but your range covers many months. To the bars need to be much wider to show up on that scale. E.g. width=10000000 yields:

Bokeh HoverTool Shows "???"

I'm getting into the Bokeh library with Python, but I'm having some trouble. I have the following code from the Bokeh tutorial website:
from bokeh.plotting import figure
from bokeh.io import output_notebook, show
output_notebook()
from bokeh.sampledata.autompg import autompg
from bokeh.models import HoverTool
from bokeh.plotting import ColumnDataSource
grouped = autompg.groupby("yr")
mpg2 = grouped["mpg"]
avg = mpg2.mean()
std = mpg2.std()
years = list(grouped.groups.keys())
american = autompg[autompg["origin"]==1]
japanese = autompg[autompg["origin"]==3]
p = figure(title="MPG by Year (Japan and US)")
p.vbar(x=years, bottom=avg-std, top=avg+std, width=0.8,
fill_alpha=0.2, line_color=None, legend="MPG 1 stddev")
p.circle(x=japanese["yr"], y=japanese["mpg"], size=10, alpha=0.5,
color="red", legend="Japanese")
p.triangle(x=american["yr"], y=american["mpg"], size=10, alpha=0.3,
color="blue", legend="American")
p.legend.location = "top_left"
show(p)
It works, but I'd like to add the functionality that when you hover over a point, it displays the horsepower. What I tried is
grouped = autompg.groupby("yr")
mpg = grouped["mpg"]
avg = mpg.mean()
std = mpg.std()
years = list(grouped.groups.keys())
american = autompg[autompg["origin"]==1]
japanese = autompg[autompg["origin"]==3]
source = ColumnDataSource(data=
dict(autompg)
)
hover1 = HoverTool(tooltips=[("hp", "#hp")])
p = figure(title="MPG by Year (Japan and US)",tools=[hover1])
p.vbar(x=years, bottom=avg-std, top=avg+std, width=0.8,
fill_alpha=0.2, line_color=None, legend="MPG 1 stddev")
p.circle(x=japanese["yr"], y=japanese["mpg"], size=10, alpha=0.5,
color="red", legend="Japanese")
p.triangle(x=american["yr"], y=american["mpg"], size=10, alpha=0.3,
color="blue", legend="American")
p.legend.location = "top_left"
show(p)
So defining a HoverTool that I hoped would do just that. Unfortunately, it only displays "hp: ???" for every entry. I think it's a problem with the data source, but I don't have much experience here and can't figure it out myself. I've tried the source without dict(), and I've tried to set it as american or japanese, but none of this made a difference.
Thanks!
You need to pass the source to the glyph functions, and refer to the column names for the coordinates. If you pass literal lists/arrays (as you are doing above) to circle, etc. then Bokeh will create a CDS for that data under the covers, but only with the just the data you pass to the glyph function (i.e. without extra columns like "hp"). Since you are trying to plot different glyphs for different subsets of the data, the simplest thing will be to use a CDSView to group them on the client. Something like this instead:
from bokeh.plotting import figure
from bokeh.io import show
from bokeh.sampledata.autompg import autompg
from bokeh.models import ColumnDataSource, CDSView, GroupFilter, HoverTool
p = figure()
# Bokeh factors must be strings
autompg.origin = [str(x) for x in autompg.origin]
source = ColumnDataSource(autompg)
# view for just japanese origin
japanese = CDSView(source=source, filters=[GroupFilter(column_name='origin', group="1")])
# draw circles for just the japanese view
p.circle(x="yr", y="mpg", size=10, alpha=0.5, color="red", legend="Japanese",
source=source, view=japanese)
# view for just japanese origin
american = CDSView(source=source, filters=[GroupFilter(column_name='origin', group="3")])
# draw triangles for just the american view
p.triangle(x="yr", y="mpg", size=10, alpha=0.5, color="blue", legend="american",
source=source, view=american)
p.add_tools(HoverTool(tooltips=[("hp", "#hp")]))
show(p)

How to draw a circle plot the LinearColorMapper using python Bokeh

With the following code,
from bokeh.plotting import figure, show, output_file
from bokeh.sampledata.iris import flowers
colormap = {'setosa': 'red', 'versicolor': 'green', 'virginica': 'blue'}
colors = [colormap[x] for x in flowers['species']]
p = figure(title = "Iris Morphology")
p.xaxis.axis_label = 'Petal Length'
p.yaxis.axis_label = 'Petal Width'
p.circle(flowers["petal_length"], flowers["petal_width"],
color=colors, fill_alpha=0.2, size=10)
output_file("iris.html", title="iris.py example")
show(p)
I can make a circle plot where I color the species:
But what I want to do is to color all the point based on range of
value in petal_length.
I tried this code but fail:
from bokeh.models import LinearColorMapper
exp_cmap = LinearColorMapper(palette='Viridis256', low = min(flowers["petal_length"]), high = max(flowers["petal_length"]))
p.circle(flowers["petal_length"], flowers["petal_width"],
fill_color = {'field' : flowers["petal_lengh"], 'transform' : exp_cmap})
output_file("iris.html", title="iris.py example")
show(p)
And also in the final desired plot, how can I put the color bar that
show the range of values and the assigned value. Something like this:
I'm using Python 2.7.13.
To answer your first part, there was a small typo (petal_lengh instead of petal_length) but more importantly, using the bokeh.ColumnDataSource will solve your problem (I tried to do it without CDS and only got column errors):
from bokeh.plotting import figure, show, output_file
from bokeh.sampledata.iris import flowers
from bokeh.models import LinearColorMapper
from bokeh.models import ColumnDataSource
p = figure(title = "Iris Morphology")
p.xaxis.axis_label = "Petal Length"
p.yaxis.axis_label = "Petal Width"
source = ColumnDataSource(flowers)
exp_cmap = LinearColorMapper(palette="Viridis256",
low = min(flowers["petal_length"]),
high = max(flowers["petal_length"]))
p.circle("petal_length", "petal_width", source=source, line_color=None,
fill_color={"field":"petal_length", "transform":exp_cmap})
# ANSWER SECOND PART - COLORBAR
# To display a color bar you'll need to import
# the `bokeh.models.ColorBar` class and pass it your mapper.
from bokeh.models import ColorBar
bar = ColorBar(color_mapper=exp_cmap, location=(0,0))
p.add_layout(bar, "left")
show(p)
See also: https://github.com/bokeh/bokeh/blob/master/examples/plotting/file/color_data_map.py
The colormapper transform refers to a column name and does not accept actual literal lists of data. So all the data needs to be in a Bokeh ColumDataSource and the plotting funcs all need to refer to the column names. Fortunately this is straightforward:
p.circle("petal_length", "petal_width", source=flowers, size=20,
fill_color = {'field': 'petal_length', 'transform': exp_cmap})
Directions for legends outside the plot area are documented here:
https://docs.bokeh.org/en/latest/docs/user_guide/styling.html#outside-the-plot-area

interactive scatter plot in bokeh with hover tool

I'm trying to make a an interactive plots with bokeh and the hover tool.
More precisely, I'm trying to make a plot like the one I made in seaborn but I'd like it to be more interactive, meaning :
I'd like people to see the income level when they hover over one point.
I'd like the plot to stay scattered like that such thas each point is an individual point, letting people hover over them in the process.
I'd like to pick the colors,to divide between different levels of income.
How would I do that ? I tried this :
x = Belgian_income["Municipalities"]
y = Belgian_income["Average income per inhabitant"]
list_x = list(x)
list_y = list(y)
dict_xy = dict(zip(list_x,list_y))
output_file('test.html')
source = ColumnDataSource(data=dict(x=list_x,y=list_y,desc=str(list_y)))
hover = HoverTool(tooltips=[
("index", "$index"),
("(x,y)", "($x, $y)"),
('desc','#desc'),
])
p = figure(plot_width=400, plot_height=400, tools=[hover],
title="Belgian test")
p.circle('x', 'y', size=20, source=source)
show(p)
But it doesn't work at all, can someone help me ? Thanks a lot.
The main issue in your code is that you provide lists to all columns of the data source, except for the desc - you provide a single string there.
With that fixed, your code works. But the tooltips show X and Y coordinates of the mouse pointer - not the actual data. For the actual data, you have to replace $ in the hover tooltips definitions with #.
Consider this working example:
from math import sin
from random import random
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource, HoverTool, LinearColorMapper
from bokeh.palettes import plasma
from bokeh.plotting import figure
from bokeh.transform import transform
list_x = list(range(100))
list_y = [random() + sin(i / 20) for i in range(100)]
desc = [str(i) for i in list_y]
source = ColumnDataSource(data=dict(x=list_x, y=list_y, desc=desc))
hover = HoverTool(tooltips=[
("index", "$index"),
("(x,y)", "(#x, #y)"),
('desc', '#desc'),
])
mapper = LinearColorMapper(palette=plasma(256), low=min(list_y), high=max(list_y))
p = figure(plot_width=400, plot_height=400, tools=[hover], title="Belgian test")
p.circle('x', 'y', size=10, source=source,
fill_color=transform('y', mapper))
output_file('test.html')
show(p)

In Bokeh, Weird Date Axis Issue

I'm trying to plot some data with Bokeh via pandas. The x-axis is date, and I can get Bokeh to plot the axis "mostly" correct (the range may be off). However, the line it outputs is all over the place.
For example:
It looks like maybe it's one big, continuous line?
Here's my code:
# library imports
import pandas as pd
from bokeh.io import output_file, show, vform
from bokeh.plotting import figure, output_file, ColumnDataSource, show
from bokeh.models import HoverTool, BoxAnnotation, BoxSelectTool, BoxZoomTool, WheelZoomTool, ResetTool
# Import csv into pandas dataframe
df = pd.read_csv(r"C:\Users\paul.shapiro\Documents\kwdata.csv", parse_dates=['Interest over time_time'])
df.rename(columns={'Search Term': 'keyword', 'Interest over time_time': 'date', 'Weekly Volume': 'volume'}, inplace=True)
source = ColumnDataSource(data=dict(x=df['date'], y=df['volume'], desc=df['keyword']))
TOOLS = [HoverTool(tooltips=[("Keyword", "#desc"),("Date", "#x"),("Search Volume", "#y")]), BoxZoomTool(), WheelZoomTool(), ResetTool()]
# Output html for embedding
output_file("line.html")
p = figure(plot_width=800, plot_height=800, tools=TOOLS, x_axis_type="datetime")
# add both a line and circles on the same plot
p.line(df['date'], df['volume'], line_width=2, color=df['keyword'], source=source)
p.circle(df['date'], df['volume'], fill_color="white", size=8, source=source)
show(p)
It's also interesting to note, that if you plot it using bokeh.charts (if I did this the tooltips wouldn't work, so it's not an option), it plots fine:
defaults.width = 800
defaults.height = 800
TOOLS = [BoxZoomTool(), WheelZoomTool(), ResetTool()]
line = Line(df, x='date', y='volume', color='keyword', source=source, tools=TOOLS)
show(line)
output_file("line.html", title="Search Volume")
Any help would be much appreciated. This has been driving me crazy!
SOLVED using multi_line() and a for loop:
import pandas as pd
from bokeh.io import output_file, show, vform
from bokeh.plotting import figure, output_file, ColumnDataSource, show
from bokeh.models import HoverTool, BoxAnnotation, BoxSelectTool, BoxZoomTool, WheelZoomTool, ResetTool
df = pd.read_csv(r"C:\Users\paul.shapiro\Documents\kwdata.csv", parse_dates=['Interest over time_time'])
df.rename(columns={'Search Term': 'keyword', 'Interest over time_time': 'date', 'Weekly Volume': 'volume'}, inplace=True)
gp = df.groupby('volume')
source = ColumnDataSource(data=dict(x=df['date'], y=df['volume'], desc=df['keyword']))
TOOLS = [HoverTool(tooltips=[("Keyword", "#desc"),("Date", "#x"),("Search Volume", "#y")]), BoxZoomTool(), WheelZoomTool(), ResetTool()]
p = figure(plot_width=800, plot_height=800, tools=TOOLS, x_axis_type="datetime")
gp = df.groupby('keyword')
# groups() returns a dict with 'Gene':indices as k:v pair
for g in gp.groups.items():
p.multi_line(xs=[df.loc[g[1], 'date']], ys=[df.loc[g[1], 'volume']])
p.circle(df['date'], df['volume'], fill_color="white", size=8, source=source)
output_file("newline.html")
show(p)
I cannot see anything wrong with your code. Try to see how different the dataframe df is from a simple nested list of values as per the bokeh example. Maybe by doing some manipulation to the dataframe you can get this working.
http://docs.bokeh.org/en/latest/docs/reference/plotting.html
from bokeh.plotting import figure, output_file, show
p = figure(plot_width=300, plot_height=300)
p.multi_line(xs=[[1, 2, 3], [2, 3, 4]], ys=[[6, 7, 2], [4, 5, 7]],
color=['red','green'])
show(p)

Categories