Scribd
Upload
49 views

Bokeh File Datacamp

The document discusses interactive data visualization with Bokeh. It introduces layouts for arranging multiple plots, including rows, columns, grids and tabbed layouts. It also covers linking plots together by linking axes and selections. Finally, it discusses annotations and guides in Bokeh plots, including legends, hover tooltips, axes and grids.

Uploaded by

Nasrullah Muhammad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
49 views

Bokeh File Datacamp

The document discusses interactive data visualization with Bokeh. It introduces layouts for arranging multiple plots, including rows, columns, grids and tabbed layouts. It also covers linking plots together by linking axes and selections. Finally, it discusses annotations and guides in Bokeh plots, including legends, hover tooltips, axes and grids.

Uploaded by

Nasrullah Muhammad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Introduction to
Layouts
Interactive Data Visualization with Bokeh

Arranging multiple plots

● Arrange plots (and controls) visually


on a page:
● rows, columns
● grid arrangements
● tabbed layouts
Interactive Data Visualization with Bokeh

Rows of plots
In [1]: from bokeh.layouts import row

In [2]: layout = row(p1, p2, p3)

In [3]: output_file('row.html')

In [4]: show(layout)
Interactive Data Visualization with Bokeh

Columns of plots
In [1]: from bokeh.layouts import column

In [2]: layout = column(p1, p2, p3)

In [3]: output_file('column.html')

In [4]: show(layout)
Interactive Data Visualization with Bokeh

Nested Layouts
● Rows and column can be nested for more
sophisticated layouts

In [1]: from bokeh.layouts import column, row

In [2]: layout = row(column(p1, p2), p3)

In [3]: output_file('nested.html')

In [4]: show(layout)
INTERACTIVE DATA VISUALIZATION WITH BOKEH

Let’s practice!
INTERACTIVE DATA VISUALIZATION WITH BOKEH

Advanced
Layouts
Interactive Data Visualization with Bokeh

Gridplots
In [1]: from bokeh.layouts import gridplot

In [2]: layout = gridplot([[None, p1], [p2, p3]],


...: toolbar_location=None)

In [3]: output_file('nested.html')

In [4]: show(layout)

● Give a “list of rows” for layout


● can use None as a placeholder
● Accepts toolbar_location
Interactive Data Visualization with Bokeh

Tabbed Layouts
In [1]: from bokeh.models.widgets import Tabs, Panel

In [2]: # Create a Panel with a title for each tab

In [3]: first = Panel(child=row(p1, p2), title='first')

In [4]: second = Panel(child=row(p3), title='second')

In [5]: # Put the Panels in a Tabs object

In [6]: tabs = Tabs(tabs=[first, second])

In [7]: output_file('tabbed.html')

In [8]: show(layout)
Interactive Data Visualization with Bokeh

Tabbed Layouts
INTERACTIVE DATA VISUALIZATION WITH BOKEH

Let’s practice!
INTERACTIVE DATA VISUALIZATION WITH BOKEH

Linking Plots
Together
Interactive Data Visualization with Bokeh

Linking axes
In [1]: p3.x_range = p2.x_range = p1.x_range

In [2]: p3.y_range = p2.y_range = p1.y_range


Interactive Data Visualization with Bokeh

Linking selections
In [1]: p1 = figure(title='petal length vs. sepal length')

In [2]: p1.circle('petal_length', 'sepal_length',


...: color='blue', source=source)

In [3]: p2 = figure(title='petal length vs. sepal width')

In [4]: p2.circle('petal_length', 'sepal_width',


...: color='green', source=source)

In [5]: p3 = figure(title='petal length vs. petal width')

In [6]: p3.circle('petal_length', 'petal_width',


...: line_color='red', fill_color=None,
...: source=source)
Interactive Data Visualization with Bokeh

Linking selections
INTERACTIVE DATA VISUALIZATION WITH BOKEH

Let’s practice!
INTERACTIVE DATA VISUALIZATION WITH BOKEH

Annotations
and Guides
Interactive Data Visualization with Bokeh

What are they?


● Help relate scale information to the viewer
● Axes, Grids (default on most plots)
● Explain the visual encodings that are used
● Legends
● Drill down into details not visible in the plot
● Hover Tooltips
Interactive Data Visualization with Bokeh

Legends
In [1]: plot.circle('petal_length', 'sepal_length',
...: size=10, source=source,
...: color={'field': 'species',
...: 'transform': mapper},
...: legend='species')

In [2]: plot.legend.location = 'top_left'


Interactive Data Visualization with Bokeh

Hover Tooltips
In [1]: from bokeh.models import HoverTool

In [2]: hover = HoverTool(tooltips=[


...: ('species name', '@species'),
...: ('petal length', '@petal_length'),
...: ('sepal length', '@sepal_length'),
...: ])

In [3]: plot = figure(tools=[hover, 'pan',


...: 'wheel_zoom'])
INTERACTIVE DATA VISUALIZATION WITH BOKEH

Let’s practice!

You might also like