Introduction to widgets

Interactive Data Visualization with Bokeh

George Boorman

Core Curriculum Manager, DataCamp

Widgets

8 Categories
- buttons
- groups
- icons
- inputs
- markups
- sliders
- tables
- widgets

cars_interactivity

Layout and Div

from bokeh.models import Div

from bokeh.layouts import layout, gridplot

pg = nba.loc[nba["position"] == "PG"]
sg = nba.loc[nba["position"] == "SG"]
sf = nba.loc[nba["position"] == "SF"]
pf = nba.loc[nba["position"] == "PF"]
c = nba.loc[nba["position"] == "C"]

title = Div(text="NBA Points vs. Assists by Position")

plots = []
for df in [pg, sg, sf, pf, c]:

    fig = figure(x_axis_label="Assists per Game", y_axis_label="Points per Game", 
                 x_range=(0,14), y_range=(0,35))

    fig.circle(x=df["assists"], y=df["points"], legend_label=df["position"].unique()[0])

    fig.legend.location = "bottom_right"
    plots.append(fig)
output_file(filename="subplots_with_Div.html")
show(layout([title], [gridplot(plots, ncols=3)]))

Gridplot with title

layout_with_title

Building a spinner widget

from bokeh.models import Spinner

fig = figure(x_axis_label="Rebounds", y_axis_label="Steals")
scatter = fig.circle(x="rebounds", y="steals", source=source)
spinner = Spinner(title="Glyph size", low=1, high=40, step=0.5, value=4, width=80)

spinner.js_link("value", scatter.glyph, "size")

show(layout([title], [spinner, fig]))

Spin into action

spinner_widget

The dataset

print(stocks.head())

     date          open       high       low        close      volume      name
0    2014-06-02    90.5656    90.6899    88.9285    89.8071    92337903    AAPL
1    2014-06-03    89.7799    91.2485    89.7499    91.0771    73231620    AAPL
2    2014-06-04    91.0628    92.5556    90.8728    92.1171    83870521    AAPL
3    2014-06-05    92.3142    92.7670    91.8013    92.4785    75951141    AAPL
4    2014-06-06    92.8428    93.0370    92.0671    92.2242    87620911    AAPL

Let's practice!

Interactive Data Visualization with Bokeh