Basic charting in Bokeh

• Create candlestick and volume charts with cryptocurrency data
• Could be any stock market data with open / close / high / low values

In Bokeh, create Figure object, then set properties and call methods on object to configure plot and create visual marks, called glyphs.

We start by creating a function that takes the price data frame, and returns a configured bokeh Figure:

def make_candlesticks(price: pd.DataFrame) -> Figure:

• CDS is what bokeh uses under the covers for everything.
• Each glyph call gets source=cds argument, refers to columns by name.

# this is the basic bokeh data container
# even when we pass dataframe, CDS is created under the covers
cds = ColumnDataSource(price)

# line segment glyphs
p.segment("Date", "High", "Date", "Low", color="black", source=cds)

Similarly to Altair, Bokeh creates a JSON representation of the visualization which is sent to Bokeh.JS on the frontend for rendering.

The following command in the notebook will print the JSON representation:

p.document.to_json()

(Have to access containing document to capture all bokeh models referred to.)

Function takes existing figure object and continues with configuration and augmentation.

In this case add volume bars to existing figure, install them at the bottom, add extra axis on the right.

def add_volume_bars(price: pd.DataFrame, p: Figure) -> Figure:
    # note that we set the y-range here to be 3 times the data range so that
    # the volume bars appear in the bottom third
    p.extra_y_ranges = {"vol": Range1d(start=price.Volume.min(),
                                       end=price.Volume.max()*3)}
    # use bottom=price.Volume.min() to have bottom of bars clipped off.
    p.vbar(price.Date, w, top=price.Volume, y_range_name="vol")
    # add an additional axis for the volume bars
    # configure tick formatter for currency formatting
    p.add_layout(LinearAxis(y_range_name="vol",
                            formatter=NumeralTickFormatter(format='$0,0')),
                 'right')
    return p

Extra example of same bokeh pattern:

• Create figure.
• Configure via properties.
• Create and configure glyphs.

def make_volume_bars(price: pd.DataFrame) -> Figure:
    p = figure(x_axis_type="datetime", tools=TOOLS, plot_width=1000,
               title="ETH volume", y_range=(150, price.Volume.max() * 1.1))

    p.height = 150
    # set y_range so that minimum amount is a bar of 0 height
    p.y_range = Range1d(start=price.Volume.min(),
                        end=price.Volume.max()*1.1)
    # set the primary axis formatter to currency
    p.yaxis[0].formatter = NumeralTickFormatter(format='$0,0')
    # create the bars!
    p.vbar(price.Date, w, top=price.Volume)

    return p

• Share e.g. x_range between two figures will synchronize panning and zooming on the x-axis.
• Pretty elegant!

def make_linked_candlesticks_and_volume(price: pd.DataFrame) -> Column:
    c = make_candlesticks(price)
    v = make_volume_bars(price)

    # it's this simple! we now have bidirectional linking
    v.x_range = c.x_range

    return gridplot([[c], [v]])

Almost all of the bokeh.plotting calls are methods of the Figure class, see the reference.

You can setup a URL pattern in PyCharm under “Python External Documentation” to have Shift-F1 jump to the right place:

Module bokeh.plotting gets URL pattern https://bokeh.pydata.org/en/latest/docs/reference/plotting.html#{module.name}.{class.name}.{element.name}

On my PyCharm, adding additional bokeh doc patterns for modules within bokeh.models would only result in “No external documentation URL configured for bokeh”.

Defining directly for bokeh.models does work, but then PyCharm system does not offer a macro for extracting e.g. only annotations or formatters from the full module spec.

• Planned lectures with more advanced Bokeh and Altair
• When Altair has what you need, use it. When you need more flexibility, look at Bokeh.