Interactive Data Visualization with Bokeh Interactive Data - - PowerPoint PPT Presentation

▶
interactive data visualization with bokeh
SMART_READER_LITE
LIVE PREVIEW

Interactive Data Visualization with Bokeh Interactive Data - - PowerPoint PPT Presentation

Oct 03, 2022 532 likes •869 views

INTERACTIVE DATA VISUALIZATION WITH BOKEH Interactive Data Visualization with Bokeh Interactive Data Visualization with Bokeh What is Bokeh? Interactive visualization, controls, and tools Versatile and high-level graphics

slide-1
SLIDE 1

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Interactive Data Visualization with Bokeh

slide-2
SLIDE 2

Interactive Data Visualization with Bokeh

What is Bokeh?

  • Interactive visualization, controls, and tools
  • Versatile and high-level graphics
  • High-level statistical charts
  • Streaming, dynamic, large data
  • For the browser, with or without a server
  • No JavaScript
slide-3
SLIDE 3

Interactive Data Visualization with Bokeh

slide-4
SLIDE 4

Interactive Data Visualization with Bokeh

What you will learn

  • Basic ploing with bokeh.plotting
  • Layouts, interactions, and annotations
  • Statistical charting with bokeh.charts
  • Interactive data applications in the browser
  • Case Study: A Gapminder explorer
slide-5
SLIDE 5

INTERACTIVE DATA VISUALIZATION WITH BOKEH

See you in the course!

slide-6
SLIDE 6

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Ploing with Glyphs

slide-7
SLIDE 7

Interactive Data Visualization with Bokeh

What are Glyphs

  • Visual shapes
  • circles, squares, triangles
  • rectangles, lines, wedges
  • With properties aached to data
  • coordinates (x,y)
  • size, color, transparency
slide-8
SLIDE 8

Interactive Data Visualization with Bokeh

Typical usage

In [1]: from bokeh.io import output_file, show In [2]: from bokeh.plotting import figure In [3]: plot = figure(plot_width=400, tools='pan,box_zoom') In [4]: plot.circle([1,2,3,4,5], [8,6,5,2,3]) In [5]: output_file('circle.html') In [6]: show(plot)

slide-9
SLIDE 9

Interactive Data Visualization with Bokeh

Glyph properties

  • Lists, arrays, sequences of values
  • Single fixed values

In [1]: plot = figure() In [2]: plot.circle(x=10, y=[2,5,8,12], size=[10,20,30,40])

slide-10
SLIDE 10

Interactive Data Visualization with Bokeh

Markers

  • asterisk()
  • circle()
  • circle_cross()
  • circle_x()
  • cross()
  • diamond()
  • diamond_cross()
  • inverted_triangle()
  • square()
  • square_cross()
  • square_x()
  • triangle()
  • x()
slide-11
SLIDE 11

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Let’s practice!

slide-12
SLIDE 12

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Additional Glyphs

slide-13
SLIDE 13

Interactive Data Visualization with Bokeh

Lines

In [1]: from bokeh.io import output_file, show In [2]: from bokeh.plotting import figure In [3]: x = [1,2,3,4,5] In [4]: y = [8,6,5,2,3] In [5]: plot = figure() In [6]: plot.line(x, y, line_width=3) In [7]: output_file('line.html') In [8]: show(plot)

slide-14
SLIDE 14

Interactive Data Visualization with Bokeh

Lines and Markers Together

In [1]: from bokeh.io import output_file, show In [2]: from bokeh.plotting import figure In [3]: x = [1,2,3,4,5] In [4]: y = [8,6,5,2,3] In [5]: plot = figure() In [6]: plot.line(x, y, line_width=2) In [7]: plot.circle(x, y, fill_color='white', size=10) In [8]: output_file('line.html') In [9]: show(plot)

slide-15
SLIDE 15

Interactive Data Visualization with Bokeh

Patches

  • Useful for showing geographic regions
  • Data given as “list of lists”
slide-16
SLIDE 16

Interactive Data Visualization with Bokeh

Patches

In [1]: from bokeh.io import output_file, show In [2]: from bokeh.plotting import figure In [3]: xs = [ [1,1,2,2], [2,2,4], [2,2,3,3] ] In [4]: ys = [ [2,5,5,2], [3,5,5], [2,3,4,2] ] In [5]: plot = figure() In [6]: plot.patches(xs, ys, ...: fill_color= ...: ['red', 'blue','green'], ...: line_color='white') In [7]: output_file('patches.html') In [8]: show(plot)

slide-17
SLIDE 17

Interactive Data Visualization with Bokeh

Other glyphs

  • annulus()
  • annular_wedge()
  • wedge()
  • rect()
  • quad()
  • vbar()
  • hbar()
  • image()
  • image_rgba()
  • image_url()
  • patch()
  • patches()
  • line()
  • multi_line()
  • circle()
  • val()
  • ellipse()
  • arc()
  • quadratic()
  • bezier()
slide-18
SLIDE 18

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Let’s practice!

slide-19
SLIDE 19

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Data Formats

slide-20
SLIDE 20

Interactive Data Visualization with Bokeh

Python Basic Types

In [1]: from bokeh.io import output_file, show In [2]: from bokeh.plotting import figure In [3]: x = [1,2,3,4,5] In [4]: y = [8,6,5,2,3] In [5]: plot = figure() In [6]: plot.line(x, y, line_width=3) In [7]: plot.circle(x, y, fill_color='white', size=10) In [8]: output_file('basic.html') In [9]: show(plot)

slide-21
SLIDE 21

Interactive Data Visualization with Bokeh

NumPy Arrays

In [1]: from bokeh.io import output_file, show In [2]: from bokeh.plotting import figure In [3]: import numpy as np In [4]: x = np.linspace(0, 10, 1000) In [5]: y = np.sin(x) + np.random.random(1000) * 0.2 In [6]: plot = figure() In [7]: plot.line(x, y) In [8]: output_file('numpy.html') In [9]: show(plot)

slide-22
SLIDE 22

Interactive Data Visualization with Bokeh

Pandas

In [1]: from bokeh.io import output_file, show In [2]: from bokeh.plotting import figure In [3]: # Flowers is a Pandas DataFrame In [4]: from bokeh.sampledata.iris import flowers In [5]: plot = figure() In [6]: plot.circle(flowers['petal_length'], ...: flowers['sepal_length'], ...: size=10) In [7]: output_file('pandas.html') In [8]: show(plot)

slide-23
SLIDE 23

Interactive Data Visualization with Bokeh

Column Data Source

  • Common fundamental data structure for Bokeh
  • Maps string column names to sequences of data
  • Oen created automatically for you
  • Can be shared between glyphs to link selections
  • Extra columns can be used with hover tooltips
slide-24
SLIDE 24

Interactive Data Visualization with Bokeh

Column Data Source

In [1]: from bokeh.models import ColumnDataSource In [2]: source = ColumnDataSource(data={ ...: 'x': [1,2,3,4,5], ...: 'y': [8,6,5,2,3]}) In [3]: source.data Out[3]: {'x': [1, 2, 3, 4, 5], 'y': [8, 6, 5, 2, 3]}

slide-25
SLIDE 25

Interactive Data Visualization with Bokeh

Column Data Source

In [1]: from bokeh.models import ColumnDataSource In [2]: from bokeh.sampledata.iris import flowers as df In [3]: df.head() Out[3]: sepal_length sepal_width petal_length petal_width species 0 5.1 3.5 1.4 0.2 setosa 1 4.9 3.0 1.4 0.2 setosa 2 4.7 3.2 1.3 0.2 setosa 3 4.6 3.1 1.5 0.2 setosa 4 5.0 3.6 1.4 0.2 setosa In [4]: source = ColumnDataSource(df)

slide-26
SLIDE 26

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Let’s practice!

slide-27
SLIDE 27

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Customizing Glyphs

slide-28
SLIDE 28

Interactive Data Visualization with Bokeh

Selection appearance

In [1]: plot = figure(tools='box_select, lasso_select') In [2]: plot.circle(petal_length, sepal_length, ...: selection_color='red', ...: nonselection_fill_alpha=0.2, ...: nonselection_fill_color='grey')

slide-29
SLIDE 29

Interactive Data Visualization with Bokeh

Hover appearance

In [1]: from bokeh.models import HoverTool In [2]: hover = HoverTool(tooltips=None, mode='hline') In [3]: plot = figure(tools=[hover, 'crosshair']) In [4]: # x and y are lists of random points In [5]: plot.circle(x, y, size=15, hover_color='red')

slide-30
SLIDE 30

Interactive Data Visualization with Bokeh

Color mapping

In [1]: from bokeh.models import CategoricalColorMapper In [2]: mapper = CategoricalColorMapper( ...: factors=['setosa', 'virginica', ...: 'versicolor'], ...: palette=['red', 'green', 'blue']) In [3]: plot = figure(x_axis_label='petal_length', ...: y_axis_label='sepal_length') In [4]: plot.circle('petal_length', 'sepal_length', ...: size=10, source=source, ...: color={'field': 'species', ...: 'transform': mapper})

slide-31
SLIDE 31

INTERACTIVE DATA VISUALIZATION WITH BOKEH

Let’s practice!