Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data...
Transcript of Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data...
![Page 1: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/1.jpg)
INTERACTIVE DATA VISUALIZATION WITH BOKEH
Introduction to Layouts
![Page 2: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/2.jpg)
Interactive Data Visualization with Bokeh
Arranging multiple plots
● Arrange plots (and controls) visually on a page:
● rows, columns
● grid arrangements
● tabbed layouts
![Page 3: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/3.jpg)
Interactive Data Visualization with Bokeh
Rows of plotsIn [1]: from bokeh.layouts import row
In [2]: layout = row(p1, p2, p3)
In [3]: output_file('row.html')
In [4]: show(layout)
![Page 4: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/4.jpg)
Interactive Data Visualization with Bokeh
Columns of plotsIn [1]: from bokeh.layouts import column
In [2]: layout = column(p1, p2, p3)
In [3]: output_file('column.html')
In [4]: show(layout)
![Page 5: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/5.jpg)
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)
![Page 6: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/6.jpg)
INTERACTIVE DATA VISUALIZATION WITH BOKEH
Let’s practice!
![Page 7: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/7.jpg)
INTERACTIVE DATA VISUALIZATION WITH BOKEH
Advanced Layouts
![Page 8: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/8.jpg)
Interactive Data Visualization with Bokeh
GridplotsIn [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
![Page 9: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/9.jpg)
Interactive Data Visualization with Bokeh
Tabbed LayoutsIn [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)
![Page 10: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/10.jpg)
Interactive Data Visualization with Bokeh
Tabbed Layouts
![Page 11: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/11.jpg)
INTERACTIVE DATA VISUALIZATION WITH BOKEH
Let’s practice!
![Page 12: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/12.jpg)
INTERACTIVE DATA VISUALIZATION WITH BOKEH
Linking Plots Together
![Page 13: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/13.jpg)
Interactive Data Visualization with Bokeh
Linking axesIn [1]: p3.x_range = p2.x_range = p1.x_range
In [2]: p3.y_range = p2.y_range = p1.y_range
![Page 14: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/14.jpg)
Interactive Data Visualization with Bokeh
Linking selectionsIn [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)
![Page 15: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/15.jpg)
Interactive Data Visualization with Bokeh
Linking selections
![Page 16: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/16.jpg)
INTERACTIVE DATA VISUALIZATION WITH BOKEH
Let’s practice!
![Page 17: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/17.jpg)
INTERACTIVE DATA VISUALIZATION WITH BOKEH
Annotations and Guides
![Page 18: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/19.jpg)
Interactive Data Visualization with Bokeh
LegendsIn [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'
![Page 20: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/20.jpg)
Interactive Data Visualization with Bokeh
Hover TooltipsIn [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'])
![Page 21: Introduction to Layouts - Cloud Object Storage | Store & … · · 2016-11-18Interactive Data Visualization with Bokeh Arranging multiple plots Arrange plots (and controls) visually](https://reader030.fdocuments.us/reader030/viewer/2022021506/5b01c7ed7f8b9a65618e2fa7/html5/thumbnails/21.jpg)
INTERACTIVE DATA VISUALIZATION WITH BOKEH
Let’s practice!