Bokeh Is Better Than Ever! - Home · EuroPython 2016

3y ago
60 Views
3 Downloads
2.82 MB
55 Pages
Last View : 8d ago
Last Download : 3m ago
Upload by : Philip Renner
Transcription

Bokeh is better than ever!Fabio Pligerfabio.pliger@gmail.com@b smokeEuroPython 2016, Bilbao

Hi! Bokeh core devSw. Engineer @continuumio@b smokefabio.pliger@gmail.com2

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

IntroductionShow some hands4

Introduction 5k/month5

IntroductionWhat is .io/blog/2016/6/28/release-0-12/6

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

Bokeh Server (a.k.a. Bokeh Apps) Completely rewritten since 0.11Powerful and performantBased on tornado and web socketsIntegrated with bokeh command (bokeh serve)keep the “model objects” in python and in the browser in sync respond to UI and tool events generated in a browser with computations or queries using python automatically push updates the UI (i.e. widgets or plots), in a browser use periodic, timeout, and asynchronous callbacks to drive streaming updatesSee the new User’s Guide for much more info:http://bokeh.pydata.org/en/latest/docs/user guide/server.html#userguide-server-applications8

Bokeh Server (a.k.a. Bokeh Apps)https://demo.bokehplots.com/9

Bokeh Server (a.k.a. Bokeh Apps) Running bokeh server: to serve bokeh applications:‣ bokeh serve app dir app script.py [options] for output server or bokeh.client connections:‣ bokeh serveSee the new User’s Guide for much more info:http://bokeh.pydata.org/en/latest/docs/user rvehttp://bokeh.pydata.org/en/latest/docs/user guide/server.html#running-a-bokeh-server10

Bokeh Server (Bokeh App - Single Module Format)[imports ]from bokeh.plotting import figure, curdoc# create a plot and style its propertiesp figure(x range (0, 100),y range (0, 100),toolbar location None)p.border fill color 'black'p.background fill color 'black'p.outline line color Nonep.grid.grid line color None# add a text renderer to out plot (no data yet)r p.text(x [], y [], text [], text color [],text font size "20pt",text baseline "middle",text align "center")i 0rnd np.random.randomds r.data sourcedef callback():global ids.data['x'].append(rnd()*70 15)ds.data['y'].append(rnd()*70 15)ds.data['text (str(i))ds.trigger('data', ds.data, ds.data)i i 1# add a button widget and configure with the# call backbutton Button(label "Press Me")button.on click(callback)# put everything a layout & to the documentcurdoc().add root(column(button, p))11

Bokeh Server (Bokeh App - Directory Format) A directory with at least a main.py file can be used. Similar to a single module format but functionality extended to: A server lifecycle.py file that allows optional callbacks to be triggered atdifferent stages of application creation, as described in Lifecycle Hooks. A static subdirectory that can be used to serve static resourcesassociated with this application. A theme.yaml file that declaratively defines default attributes to beapplied to Bokeh model types. A templates subdirectory with index.html Jinja template file. Thedirectory may contain additional Jinja templates for index.html to refer to.The template should have the same parameters as the FILE template.12

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

Bokeh CommandThe bokeh html commandcan create standalone HTMLdocuments from any kind ofBokeh application source: e.g.,python scripts, app directories,JSON files, jupyter notebooks andothers. For example:The bokeh json commandwill generate a serialized JSONrepresentation of a Bokehdocument from any kind ofBokeh application source. Forexample:The bokeh serve commandlet’s you instantly turn Bokehdocuments into interactive webapplications. For example:bokeh html myapp.pybokeh json myapp.pybokeh serve myapp.pySee the new User’s Guide for much more info:http://bokeh.pydata.org/en/latest/docs/user guide/cli.html14

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

Static Documents, Dynamic tro.ipynb#Interaction16

Client Side (Javascript) Callbacks JS Callbacks extend capability now, for a marginal cost (a few lines of JS) [Will] encapsulate common patterns as they are discovered (no more JS!) A dream: write callbacks in Python, translate automatically !!! no python code is ever executed when a CustomJS callback is used A CustomJS callback is only executed inside a browser JavaScript interpreter, and canonly directly interact JavaScript data and functions (e.g., BokehJS Backbone models).See the new User’s Guide for much more info:http://bokeh.pydata.org/en/latest/docs/user guide/interaction.html17

Client Side “Python” Callbacks18

[Python] Jupyter Interactors Callbacks widgets in the GUI can trigger pythoncallback functions that execute in theJupyter Python kernel these callbacks call push notebook()to push updates It is currently possible to pushudpdates from python, to BokehJS(i.e., to update plots, etc.) usingpush notebook() but not the opposite19

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout \o/ Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

New Layout21

Layouts Bye bye VBox and HBox Welcome Row, Column, and WidgetBox \o/ row(), column(), and widgetbox() let you build a grid of plots and widgets (rows, columns, and plots) support a number of “sizing modes”. These sizing modes allow plots and widgets toresize based on the browser window (all items must have the same sizing mode &Widgets should be inside a widget box)See the new User’s Guide for much more info:http://bokeh.pydata.org/en/latest/docs/user guide/layout.html22

Layouts (column)output file("layout.html")x list(range(11))y0 xy1 [10 - i for i in x]y2 [abs(i - 5) for i in x]# create a new plots1 figure(width 250, plot height 250, title None)s1.circle(x, y0, size 10, color "navy", alpha 0.5)# create another ones2 figure(width 250, height 250, title None)s2.triangle(x, y1, size 10, color "firebrick", alpha 0.5)# create and anothers3 figure(width 250, height 250, title None)s3.square(x, y2, size 10, color "olive", alpha 0.5)# put the results in a column and showshow(column(s1, s2, s3))23

Layouts (row)output file("layout.html")x list(range(11))y0 xy1 [10 - i for i in x]y2 [abs(i - 5) for i in x]# create a new plots1 figure(width 250, plot height 250, title None)s1.circle(x, y0, size 10, color "navy", alpha 0.5)# create another ones2 figure(width 250, height 250, title None)s2.triangle(x, y1, size 10, color "firebrick", alpha 0.5)# create and anothers3 figure(width 250, height 250, title None)s3.square(x, y2, size 10, color "olive", alpha 0.5)# put the results in a column and showshow(row(s1, s2, s3))24

Layout (gridplot) from bokeh.layouts import grid plotoutput file("layout grid.html")x list(range(11))y0 xy1 [10 - i for i in x]y2 [abs(i - 5) for i in x]# create three plotsp1 figure(width 250, plot height 250, title None)p1.circle(x, y0, size 10, color Viridis3[0])p2 figure(width 250, height 250, title None)p2.triangle(x, y1, size 10, color Viridis3[1])p3 figure(width 250, height 250, title None)p3.square(x, y2, size 10, color Viridis3[2])# make a gridgrid gridplot([[p1, p2], [None, p3]])# show the resultsshow(grid)25

Layout (layout)l layout([[bollinger],[sliders, plot],[p1, p2, p3],],sizing mode ‘stretch both')The full code for this plot is available atexamples/howto/layouts/dashboard.pyin the project GitHub repository.26

Layout mo.bokehplots.com/apps/selection histogram27

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

Custom Extensions It is possible to extend Bokeh by creating custom user extensions to: Modify the behaviour of existing Bokeh models Add new models to connect third-party JavaScript libraries to Python Create highly specialized models for domain specific use-cases do not require setting up a development environment or building anything fromsourceSee the new User’s Guide for much more info:http://bokeh.pydata.org/en/latest/docs/user guide/extensions.html29

Custom Extensions (Python Models) Python Models For the most part, completely declarative classes Custom extensions are created by making a subclass Model and including specialclass attributes to declare the properties that are mirrored on the JavaScript sidefrom bokeh.core.properties import String, Instancefrom bokeh.models import LayoutDOM, Sliderclass Custom(LayoutDOM):text String(default "Custom text")range Instance(Slider)30

Custom Extensions (JavaScript Models and Views) JavaScript side requires code to implement the model When appropriate, code for a corresponding view must also be provided. Currently BokehJS models and views are subclasses of Models and View from theBackbone JavaScript library.from bokeh.core.properties import String, Instancefrom bokeh.models import LayoutDOM, Sliderclass Custom(LayoutDOM):implementation open("custom.coffee").read()text String(default "Custom text")slider Instance(Slider)31

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

Annotationsallow users to add supplemental information to theirvisualizationsTitle and Legends are annotations now!See the new User’s Guide for much more info:http://bokeh.pydata.org/en/latest/docs/user guide/plotting.html#adding-annotations33

[New] Annotations (Arrows)from bokeh.models import Arrow, OpenHead, NormalHead,VeeHeadp figure(plot width 600, plot height 600)p.circle(x [0, 1, 0.5], y [0, 0, 0.7], radius 0.1,color ["navy", "yellow", "red"],fill alpha 0.1)p.add layout(Arrow(end OpenHead(line color "firebrick",line width 4),x start 0, y start 0, x end 1,y end 0))p.add layout(Arrow(end NormalHead(fill color "orange"),x start 1, y start 0, x end 0.5,y end 0.7))p.add layout(Arrow(end VeeHead(size 35),line color "red",x start 0.5, y start 0.7, x end 0,y end 0))show(p)34

[New] Annotations (BoxAnnotation)from bokeh.models import BoxAnnotation data data.ix['2010-10-06':'2010-10-13']p figure(x axis type "datetime", tools TOOLS)p.line(data.index.to series(), data['glucose'],line color "gray", line width 1, legend "glucose")low box BoxAnnotation(top 80, fill alpha 0.1,fill color 'red')mid box BoxAnnotation(bottom 80, top 180,fill alpha 0.1, fill color 'green')high box BoxAnnotation(bottom 180, fill alpha 0.1,fill color ‘red')p.add layout(low box)p.add layout(mid box)p.add layout(high box)show(p)35

[New] Annotations (Label)from bokeh.models import ColumnDataSource, Range1d, LabelSet,Label p figure(title 'Dist. of 10th Grade Students at Lee High',x range Range1d(140, 275))p.scatter(x 'weight', y 'height', size 8, source source)p.xaxis[0].axis label 'Weight (lbs)'p.yaxis[0].axis label 'Height (in)'labels LabelSet(x 'weight', y 'height', text 'names',level 'glyph',x offset 5, y offset 5, source source,render mode 'canvas')citation Label(x 70, y 70, x units 'screen', y units 'screen',text 'Collected by Luke C. 2016-04-01', render mode ‘css',border line color 'black', border line alpha 1.0,background fill color 'white', background fill alpha 1.0)p.add layout(labels)p.add layout(citation)show(p)36

[New] Annotations (Span)from bokeh.models import Spanp figure(x axis type "datetime", y axis type "datetime")p.line(daylight warsaw 2013.Date, daylight warsaw 2013.Sunset,line dash 'solid', line width 2, legend "Sunset")p.line(daylight warsaw 2013.Date, daylight warsaw 2013.Sunrise,line dash 'dotted', line width 2, legend "Sunrise") daylight savings start Span(location start date,dimension 'height', line color 'green',line dash 'dashed', line width 3)p.add layout(daylight savings start)daylight savings end Span(location end date, dimension 'height',line color 'red',line dash 'dashed', line width 3)p.add layout(daylight savings end)show(p)37

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

Geo Support (GeoJSON Datasource)from bokeh.models import GeoJSONDataSourcefrom bokeh.plotting import figurefrom bokeh.sampledata.sample geojson import geojsongeo source GeoJSONDataSource(geojson geojson)p figure()p.circle(x 'x', y 'y', alpha 0.9, source geo source)output file("geojson.html")show(p){"type": "Feature","geometry": {"type": "Point","coordinates": [125.6, 10.1]},"properties": {"name": "Dinagat Islands"}39

Geo Support (Google Maps)Warning :(There is an open issue documenting points appearing to be 10px off from theirintended location.Google has its own terms of service for using Google Maps API and any use of Bokehwith Google Maps must be within Google’s Terms of Service40

Geo Support (Tile Providers)Bokeh plots can also consume XYZ tile serviceswhich use the Web Mercator projection. Themodule bokeh.tile providers contains severalpre-configured tile sources with appropriateattribution which can be added to a plot using the.add tile() method.from bokeh.io import output file, showfrom bokeh.plotting import figurefrom bokeh.tile providers import STAMEN TONERbound 20000000 # metersfig figure(tools 'pan, wheel zoom', x range (-bound, bound),y range (-bound, bound))fig.axis.visible Falsefig.add tile(STAMEN TONER)output file("stamen toner plot.html")show(fig)41

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

Bokeh JS BokehJS now has its own [real] APIThe BokehJS APIs are new as of version 0.12 and may undergo some changes before a 1.0 release.available via CDN and npmLow Level ModelsPlotting interfaceCharts interface** bar pieSee the new User’s Guide for much more info:http://bokeh.pydata.org/en/latest/docs/user guide/bokehjs.html43

Bokeh JSvar plt Bokeh.Plotting;var pie data {labels: ['Work', 'Eat', 'Commute', 'Sport', 'Watch TV','Sleep'],values: [8, 2, 2, 4, 0, 8],};var p2 Bokeh.Charts.pie(pie data, {inner radius: 0.2,start angle: Math.PI / 2});var p3 Bokeh.Charts.pie(pie data, {inner radius: 0.2,start angle: Math.PI / 6,end angle: 5 * Math.PI / 6});var p4 Bokeh.Charts.pie(pie data, {inner radius: 0.2,palette: "Oranges9",slice labels: "percentages"});plt.show(plt.gridplot([p2, p3, p4]));44

Bokeh JSvar plt Bokeh.Plotting;var bar data [['City', '2010 Population', '2000Population'],['New York City, NY', 8175000, 8008000],['Los Angeles, CA', 3792000, 3694000],['Chicago, IL', 2695000, 2896000],['Houston, TX', 2099000, 1953000],['Philadelphia, PA', 1526000, 1517000],];var p1 Bokeh.Charts.bar(bar data, {axis number format: "0.[00]a"});var p2 Bokeh.Charts.bar(bar data, {axis number format: "0.[00]a",stacked: true});var p3 Bokeh.Charts.bar(bar data, {axis number format: "0.[00]a",orientation: "vertical"});var p4 Bokeh.Charts.bar(bar data, {axis number format: "0.[00]a",orientation: "vertical",stacked: true});plt.show(plt.gridplot([p1, p2, p3, p4]));45

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

Bokeh JSimport numpy as npfrom bokeh.models import Jitterfrom bokeh.plotting import figure, show, output filep figure(plot width 500, plot height 400,x range (0,3), y range (0,10),title "Demonstration of Jitter transform")y1 np.random.random(2500) * 10y2 np.random.normal(size 2500)*2 5p.circle(x {'value': 1, 'transform':Jitter(width 0.4)}, y y1, color "navy", alpha 0.3)p.circle(x {'value': 2, 'transform':Jitter(width 0.4)}, y y2, color "firebrick", alpha 0.3)output file("jitter.html")show(p)47

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

WebGL [Better] Support support to all markers fixed WebGL bugs fast!See the new User’s Guide for much more info:http://bokeh.pydata.org/en/latest/docs/user guide/webgl.html49

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

HoloViewsmore info at http://holoviews.org/51

DataShaderhttp://datashader.readthedocs.io/52

SUMMARY Introductions Gimme good stuff :) Bokeh Server Bokeh Command Client Side Callbacks New Layout Custom Extensions Annotations Geo Support JS/Typescript API JS Transforms [More] WebGL support Extras What’s next?

1.0!54

THANK YOU!

JS/Typescript API JS Transforms [More] WebGL support Extras What’s next? 8 Completely rewritten since 0.11 Powerful and performant Based on tornado and web sockets Integrated with bokeh command (bokeh serve) keep the “model objects” in python and in the browser in sync respond to UI and tool events generated in a browser with computations or .

Related Documents:

to introduce this novel synthetic bokeh and DP-/DoF-based multi-view synthesis. Fig. 1 shows a comparison of differ-ent image motion approaches. It also provides the output of the traditional bokeh synthesis in the first row. Recall that other image motion approaches do not synthesize the bokeh effect. As a result, our method combines image mo-

Bokeh is an interactive visualization Python library. Provides elegant and concise construction of versatile graphics. Usage: Can be used in Jupyter Notebooks and can provide high-performance interactive charts and plots. Plotly - Alternatives (Bokeh, D3.js) D3.js:

The Zen of Python, by Tim Peters Beautiful is better than ugly. Explicit is better than implicit. Simple is better than complex. Complex is better than complicated. Flat is better than nested. Sparse is better than dense. Readability counts. Special cases aren't special enough to break the rules. Although practicality beats purity.

Corel PHOTO-PAINT introduces camera effects, including Bokeh blur, Colorize, Sepia Toning, and Time Machine. Tone curve adjustments Adjust image tone with more accuracy and precision. Image Adjustment Lab Easily and efficiently

depth map on the right; (d) virtual objects colliding with physical exercise equipment; (e) “Bokeh”-like effect putting focus on a physical 3D anchor; (f) occlusion and path planning in a mobile AR game. Please refer to the accompanying video captured in real time for more result

Audio 4 mics – located on the top, bottom, left, and back of device to capture 3D audio recordings Voice Bokeh – adjust the audio to emphasize voices or ambient noise Stereo Speakers - 1W (Top) 1.3W (Bottom) audio is distributed evenly across both sides of the device for optimal sound LG 3D Sound Engine– AI recognizes and classifies audio as voice, music, or sound .

Fisheye lenses Prime fast lenses for bokeh effect Macro lenses Macro lens alternatives 2. Tripods and tripod accessories 3. Artificial light sources 4. Wildlife photography: how to hide yourself and your kit 5. Toting and protecting cameras and accessories 6. Steve’s cameras and kit

Research Paper Effect of Population Size and Mutation Rate . . and