SlideShare a Scribd company logo
1 of 27
Download to read offline
Bokeh Tutorial
PyData @ Strata 2015
Peter Wang
Continuum Analytics
@pwang
Agenda
• Overview of Bokeh - 30 min
• What & why
• Demos
• Q&A (5 min)
• Exercises - 50 min
• First plots & charts
• Tools & tooltips
• Linked plots
• Architecture overview
• Q&A - 10 min
Bokeh Overview
• Novel graphics
• Interactive visualization
• Streaming, dynamic, large data
• For the browser, with or without a server
• No need to write Javascript
Novel Graphics
Interactive
• Dragging & zooming, with linking
• Selections that can round-trip to server
• Resize, entirely on client side
• Flexible hover
http://bokeh.pydata.org/en/latest/docs/gallery.html
Streaming & Dynamic Data
Big Data
No Javascript
Server-based, Standalone, Notebook
Matplotlib, ggplot, seaborn
New Release! v0.8
http://continuum.io/blog/bokeh-0.8
• R, Julia, Scala, Lua support!
• Improved Charts interface, added "chart builders" concept
• Support for custom styling of hover tooltips
• AjaxDataSource
How to Help & Contribute
• Open source BSD license for everything (JS, Python, server)
• Use it and provide feedback
• Contribute to dev! (Hack on Starter Isssues)
• Designer? Front-end dev? Get in touch!
• Engage us to work on custom visual exploration apps &
dashboards
• Not just code integration - also provide visualization expertise
• Helps the open source efforts
@bokehplots
Additional Demos
• Population demo (examples/glyphs/population_server.py)
• Animation
• Tables: examples/glyphs/data_tables.py
• Scatter histogram: examples/plotting/server/selection_histogram.py
• Notebooks
• Linked brushing
• Interact() widgets
• NBViewer gallery
Questions?
Exercise 1 - Simple plots
• Line: http://bokeh.pydata.org/en/latest/tutorial/
basic.html#drawing-lines
• Charts
• Date axis in stock chart example
• Builders, horizons
• Diagonal plot
Exercise 2 - Tools and Tooltips
• User guide on Tools
• Hover tool exercise: 

http://bokeh.pydata.org/en/latest/tutorial/basic.html#id6
Exercise 3 - Linked Plots
Notebooks:
• https://github.com/bokeh/bokeh/blob/master/examples/
plotting/notebook/linked_panning.ipynb
• https://github.com/bokeh/bokeh/blob/master/examples/
plotting/notebook/linked_brushing.ipynb
Architecture
Previous: Javascript code generation
server.py Browser
js_str = """ <d3.js>
<highchart.js>
<etc.js>
"""
plot.js.template
App Model
D3
highcharts
flot
crossfilter
etc. ...
One-shot; no MVC interaction; no data streaming
HTML
BokehJS
• Full-fledged dynamic, interactive plotting engine
• materializes a reactive scenegraph from JSON
• optionally push/pull state from server, using websockets
• HTML5 Canvas, backbone.js, coffeescript, AMD, plays
with JSfiddle, …
!
“We wrote JavaScript, so you don’t have to.”
bokeh.py & bokeh.js
server.py BrowserApp Model
bokeh.py
object graph
JSON
BokehJS
object graph
bokeh.py & bokeh.js
server.py BrowserApp Model
BokehJS
object graph
bokeh-server
bokeh.py
object graph
JSON
iris.py
iris.html!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iris.py example</title>
<link rel="stylesheet" href="../../../../../anaconda/envs/bokehdemo/lib/python2.7/site-packages/bokeh/server/static/css/bokeh.min.css" type="text/css" />
<script type="text/javascript" src="../../../../../anaconda/envs/bokehdemo/lib/python2.7/site-packages/bokeh/server/static/js/bokeh.min.js"></script>
<script type="text/javascript">
$(function() {
var all_models = [{"attributes": {"column_names": ["fill_color", "line_color", "x", "y"], "doc": null, "selected": [], "discrete_ranges": {}, "cont_ranges": {}, "data": {"line_color": ["red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red",
"red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "green", "green", "green", "green", "green", "green", "green", "green", "green",
"green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green",
"green", "green", "green", "green", "green", "green", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue",
"blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue"], "x": [1.4, 1.4, 1.3, 1.5, 1.4, 1.7, 1.4, 1.5, 1.4, 1.5, 1.5, 1.6, 1.4, 1.1, 1.2, 1.5, 1.3, 1.4, 1.7, 1.5, 1.7, 1.5, 1.0, 1.7, 1.9, 1.6, 1.6, 1.5, 1.4, 1.6, 1.6, 1.5, 1.5, 1.4, 1.5,
1.2, 1.3, 1.4, 1.3, 1.5, 1.3, 1.3, 1.3, 1.6, 1.9, 1.4, 1.6, 1.4, 1.5, 1.4, 4.7, 4.5, 4.9, 4.0, 4.6, 4.5, 4.7, 3.3, 4.6, 3.9, 3.5, 4.2, 4.0, 4.7, 3.6, 4.4, 4.5, 4.1, 4.5, 3.9, 4.8, 4.0, 4.9, 4.7, 4.3, 4.4, 4.8, 5.0, 4.5, 3.5, 3.8, 3.7, 3.9, 5.1, 4.5, 4.5, 4.7, 4.4, 4.1, 4.0, 4.4, 4.6, 4.0, 3.3, 4.2, 4.2, 4.2, 4.3,
3.0, 4.1, 6.0, 5.1, 5.9, 5.6, 5.8, 6.6, 4.5, 6.3, 5.8, 6.1, 5.1, 5.3, 5.5, 5.0, 5.1, 5.3, 5.5, 6.7, 6.9, 5.0, 5.7, 4.9, 6.7, 4.9, 5.7, 6.0, 4.8, 4.9, 5.6, 5.8, 6.1, 6.4, 5.6, 5.1, 5.6, 6.1, 5.6, 5.5, 4.8, 5.4, 5.6, 5.1, 5.1, 5.9, 5.7, 5.2, 5.0, 5.2, 5.4, 5.1], "fill_color": ["red", "red", "red", "red", "red", "red",
"red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "green",
"green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green",
"green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue",
"blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue"], "y": [0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3,
0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2, 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2,
1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3, 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3,
1.9, 2.0, 2.3, 1.8]}, "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, "type": "ColumnDataSource", "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, "columns": ["x"]}], "id":
"bbaf66fb-48b8-474a-8dae-910a995186f6", "doc": null}, "type": "DataRange1d", "id": "bbaf66fb-48b8-474a-8dae-910a995186f6"}, {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, "columns": ["y"]}], "id": "8377dd3b-9c4e-41ce-8930-76a92a68e907", "doc": null},
"type": "DataRange1d", "id": "8377dd3b-9c4e-41ce-8930-76a92a68e907"}, {"attributes": {"doc": null, "id": "24c8ae7c-f3c8-4c88-9f5d-dcbe59506791"}, "type": "BasicTickFormatter", "id": "24c8ae7c-f3c8-4c88-9f5d-dcbe59506791"}, {"attributes": {"doc": null, "id": "3720fa34-cea8-4b54-a51b-c738a1ef96fb"}, "type":
"BasicTicker", "id": "3720fa34-cea8-4b54-a51b-c738a1ef96fb"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "doc": null, "bounds": "auto", "id": "0ae2ae05-3abd-414a-9840-c5e804de9661", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "24c8ae7c-f3c8-4c88-9f5d-dcbe59506791"}, "ticker":
{"type": "BasicTicker", "id": "3720fa34-cea8-4b54-a51b-c738a1ef96fb"}, "dimension": 0}, "type": "LinearAxis", "id": "0ae2ae05-3abd-414a-9840-c5e804de9661"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "doc": null, "axis": {"type": "LinearAxis", "id": "0ae2ae05-3abd-414a-9840-c5e804de9661"}, "id":
"25d48bf1-6583-4aff-9e47-dd57e304fb7a", "dimension": 0}, "type": "Grid", "id": "25d48bf1-6583-4aff-9e47-dd57e304fb7a"}, {"attributes": {"doc": null, "id": "d88bdf6f-b1a7-49c1-b71e-df2c1156f202"}, "type": "BasicTickFormatter", "id": "d88bdf6f-b1a7-49c1-b71e-df2c1156f202"}, {"attributes": {"doc": null, "id":
"434ab651-0a3a-4bab-aa7a-34844b833bce"}, "type": "BasicTicker", "id": "434ab651-0a3a-4bab-aa7a-34844b833bce"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "doc": null, "bounds": "auto", "id": "53cf6b9d-1c82-48d2-8094-5a81fed497d9", "location": "min", "formatter": {"type": "BasicTickFormatter", "id":
"d88bdf6f-b1a7-49c1-b71e-df2c1156f202"}, "ticker": {"type": "BasicTicker", "id": "434ab651-0a3a-4bab-aa7a-34844b833bce"}, "dimension": 1}, "type": "LinearAxis", "id": "53cf6b9d-1c82-48d2-8094-5a81fed497d9"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "doc": null, "axis": {"type": "LinearAxis", "id":
"53cf6b9d-1c82-48d2-8094-5a81fed497d9"}, "id": "21bd25eb-22d3-427c-a6a3-5e3afc96cc2a", "dimension": 1}, "type": "Grid", "id": "21bd25eb-22d3-427c-a6a3-5e3afc96cc2a"}, {"attributes": {"data_source": {"type": "ColumnDataSource", "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, "server_data_source": null, "doc": null,
"nonselection_glyphspec": {"line_color": {"value": "#1f77b4"}, "angle_units": "deg", "fill_color": {"value": "#1f77b4"}, "visible": null, "line_dash_offset": 0, "line_join": "miter", "size": {"units": "screen", "value": 10}, "line_alpha": {"units": "data", "value": 0.1}, "radius_units": "screen", "end_angle_units":
"deg", "valign": null, "length_units": "screen", "start_angle_units": "deg", "line_cap": "butt", "line_dash": [], "line_width": {"units": "data", "field": "line_width"}, "type": "circle", "fill_alpha": {"units": "data", "value": 0.1}, "halign": null, "y": {"units": "data", "field": "y"}, "x": {"units": "data",
"field": "x"}, "margin": null}, "xdata_range": null, "ydata_range": null, "glyphspec": {"line_color": {"units": "data", "field": "line_color"}, "line_alpha": {"units": "data", "value": 1.0}, "fill_color": {"units": "data", "field": "fill_color"}, "line_width": {"units": "data", "field": "line_width"}, "fill_alpha":
{"units": "data", "value": 0.2}, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "type": "circle", "size": {"units": "screen", "value": 10}}, "id": "093300cf-6759-4449-877b-7731476588a0"}, "type": "Glyph", "id": "093300cf-6759-4449-877b-7731476588a0"}, {"attributes": {"plot": null, "doc":
null, "renderers": [{"type": "Glyph", "id": "093300cf-6759-4449-877b-7731476588a0"}], "id": "9a60e0da-efe5-4b08-a4f6-7ed315d67b9b"}, "type": "BoxSelectTool", "id": "9a60e0da-efe5-4b08-a4f6-7ed315d67b9b"}, {"attributes": {"doc": null, "tool": {"type": "BoxSelectTool", "id": "9a60e0da-efe5-4b08-a4f6-7ed315d67b9b"},
"id": "5a0e8c76-4893-452b-b2e8-cefb1a232437"}, "type": "BoxSelection", "id": "5a0e8c76-4893-452b-b2e8-cefb1a232437"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "dimensions": ["width", "height"], "doc": null, "id": "a4b154c7-b674-4f86-93f8-770cf7a0d9b5"}, "type": "PanTool", "id": "a4b154c7-
b674-4f86-93f8-770cf7a0d9b5"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "dimensions": ["width", "height"], "doc": null, "id": "3ba5854b-e047-47c2-989b-15b5b79cb205"}, "type": "WheelZoomTool", "id": "3ba5854b-e047-47c2-989b-15b5b79cb205"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "id":
"0a583af8-4db5-45ea-b09b-16562035ccc4", "doc": null}, "type": "PreviewSaveTool", "id": "0a583af8-4db5-45ea-b09b-16562035ccc4"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "id": "5621f214-17c9-417f-aaed-f841745f489f", "doc": null}, "type": "ResizeTool", "id": "5621f214-17c9-417f-aaed-f841745f489f"},
{"attributes": {"plot": {"type": "Plot", "id": "iris"}, "id": "98be8a66-dfaa-4f2d-95cd-0296a3647da1", "doc": null}, "type": "ResetTool", "id": "98be8a66-dfaa-4f2d-95cd-0296a3647da1"}, {"attributes": {"outer_height": 600, "x_range": {"type": "DataRange1d", "id": "bbaf66fb-48b8-474a-8dae-910a995186f6"}, "y_range":
{"type": "DataRange1d", "id": "8377dd3b-9c4e-41ce-8930-76a92a68e907"}, "outer_width": 600, "renderers": [{"type": "LinearAxis", "id": "0ae2ae05-3abd-414a-9840-c5e804de9661"}, {"type": "Grid", "id": "25d48bf1-6583-4aff-9e47-dd57e304fb7a"}, {"type": "LinearAxis", "id": "53cf6b9d-1c82-48d2-8094-5a81fed497d9"}, {"type":
"Grid", "id": "21bd25eb-22d3-427c-a6a3-5e3afc96cc2a"}, {"type": "BoxSelection", "id": "6451a3a2-d1d7-401e-8ec6-ed92c626f448"}, {"type": "BoxSelection", "id": "5a0e8c76-4893-452b-b2e8-cefb1a232437"}, {"type": "Glyph", "id": "093300cf-6759-4449-877b-7731476588a0"}], "id": "iris", "data_sources": [], "doc": null,
"canvas_height": 600, "title": "Plot", "tools": [{"type": "PanTool", "id": "a4b154c7-b674-4f86-93f8-770cf7a0d9b5"}, {"type": "WheelZoomTool", "id": "3ba5854b-e047-47c2-989b-15b5b79cb205"}, {"type": "BoxZoomTool", "id": "a047dc9b-0dd1-4883-8575-550cd63409fa"}, {"type": "PreviewSaveTool", "id": "0a583af8-4db5-45ea-
b09b-16562035ccc4"}, {"type": "ResizeTool", "id": "5621f214-17c9-417f-aaed-f841745f489f"}, {"type": "BoxSelectTool", "id": "9a60e0da-efe5-4b08-a4f6-7ed315d67b9b"}, {"type": "ResetTool", "id": "98be8a66-dfaa-4f2d-95cd-0296a3647da1"}], "canvas_width": 600}, "type": "Plot", "id": "iris"}, {"attributes": {"plot":
{"type": "Plot", "id": "iris"}, "id": "a047dc9b-0dd1-4883-8575-550cd63409fa", "doc": null}, "type": "BoxZoomTool", "id": "a047dc9b-0dd1-4883-8575-550cd63409fa"}, {"attributes": {"doc": null, "tool": {"type": "BoxZoomTool", "id": "a047dc9b-0dd1-4883-8575-550cd63409fa"}, "id": "6451a3a2-d1d7-401e-8ec6-ed92c626f448"},
"type": "BoxSelection", "id": "6451a3a2-d1d7-401e-8ec6-ed92c626f448"}, {"attributes": {"doc": null, "children": [{"type": "Plot", "id": "iris"}], "id": "475ad0da-baf5-48be-902b-166b060b6978"}, "type": "PlotContext", "id": "475ad0da-baf5-48be-902b-166b060b6978"}];
var modelid = "475ad0da-baf5-48be-902b-166b060b6978";
var modeltype = "PlotContext";
var elementid = "8bb1deb5-74cb-4b28-b44f-c89dc5701d69";
console.log(modelid, modeltype, elementid);
Bokeh.load_models(all_models);
var model = Bokeh.Collections(modeltype).get(modelid);
var view = new model.default_view({model: model, el: '#8bb1deb5-74cb-4b28-b44f-c89dc5701d69'});
});
</script>
</head>
<body>
<div class="plotdiv" id="8bb1deb5-74cb-4b28-b44f-c89dc5701d69">Plots</div>
</body>
</html>
iris.html (detail)
<head>
<meta charset="utf-8">
<title>iris.py example</title>
<link rel="stylesheet" href="../bokeh/server/static/css/bokeh.min.css" type="text/css" />
<script type="text/javascript" src=“../bokeh/server/static/js/bokeh.min.js"></script>
<script type=“text/javascript”>
$(function() {
var all_models = [JSON data]
var modelid = "475ad0da-baf5-48be-902b-166b060b6978";
var modeltype = "PlotContext";
var elementid = "8bb1deb5-74cb-4b28-b44f-c89dc5701d69";
console.log(modelid, modeltype, elementid);
Bokeh.load_models(all_models);
var model = Bokeh.Collections(modeltype).get(modelid);
var view = new model.default_view({
model: model,
el: '#8bb1deb5-74cb-4b28-b44f-c89dc5701d69'});
});
</script>
</head>
<body>
<div class="plotdiv" id="8bb1deb5-74cb-4b28-b44f-c89dc5701d69">Plots</div>
</body>
</html>
JSON
{
"attributes": {
"sources": [
{
"source": {
"type": "ColumnDataSource",
"id": "5e71b46a-0d81-4a18-8402-188816471c0c"
},
"columns": [
"x"
]
}
],
"id": "bbaf66fb-48b8-474a-8dae-910a995186f6",
"doc": null
},
"type": "DataRange1d",
"id": "bbaf66fb-48b8-474a-8dae-910a995186f6"
},
Other languages can generate JSON...
bokeh.r!
bokeh.h

bokeh.m

bokeh.java

...

More Related Content

Similar to Bokeh Tutorial - PyData @ Strata 2015

Interactive Visualization With Bokeh (SF Python Meetup)
Interactive Visualization With Bokeh (SF Python Meetup)Interactive Visualization With Bokeh (SF Python Meetup)
Interactive Visualization With Bokeh (SF Python Meetup)Peter Wang
 
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012Moullet
 
8th TUC Meeting – Yinglong Xia (Huawei), Big Graph Analytics Engine
8th TUC Meeting – Yinglong Xia (Huawei), Big Graph Analytics Engine8th TUC Meeting – Yinglong Xia (Huawei), Big Graph Analytics Engine
8th TUC Meeting – Yinglong Xia (Huawei), Big Graph Analytics EngineLDBC council
 
Mining the Geo Needles in the Social Haystack
Mining the Geo Needles in the Social HaystackMining the Geo Needles in the Social Haystack
Mining the Geo Needles in the Social HaystackMatthew Russell
 
How to look like a model? MongoDB for Rails apps
How to look like a model? MongoDB for Rails appsHow to look like a model? MongoDB for Rails apps
How to look like a model? MongoDB for Rails appsboogie_cat
 
Eventsourcing with PHP and MongoDB
Eventsourcing with PHP and MongoDBEventsourcing with PHP and MongoDB
Eventsourcing with PHP and MongoDBJacopo Nardiello
 
Radical Collaboration: Tools for Partnering with Community Members
Radical Collaboration: Tools for Partnering with Community MembersRadical Collaboration: Tools for Partnering with Community Members
Radical Collaboration: Tools for Partnering with Community MembersNina Simon
 
(APP203) How Sumo Logic and Anki Build Highly Resilient Services on AWS to Ma...
(APP203) How Sumo Logic and Anki Build Highly Resilient Services on AWS to Ma...(APP203) How Sumo Logic and Anki Build Highly Resilient Services on AWS to Ma...
(APP203) How Sumo Logic and Anki Build Highly Resilient Services on AWS to Ma...Amazon Web Services
 
Eficiency and Low Cost: Pro Tips for you to save 50% of your money with Googl...
Eficiency and Low Cost: Pro Tips for you to save 50% of your money with Googl...Eficiency and Low Cost: Pro Tips for you to save 50% of your money with Googl...
Eficiency and Low Cost: Pro Tips for you to save 50% of your money with Googl...Daniel Cukier
 
[第2回3D勉強会 研究紹介] Neural 3D Mesh Renderer (CVPR 2018)
[第2回3D勉強会 研究紹介] Neural 3D Mesh Renderer (CVPR 2018)[第2回3D勉強会 研究紹介] Neural 3D Mesh Renderer (CVPR 2018)
[第2回3D勉強会 研究紹介] Neural 3D Mesh Renderer (CVPR 2018)Hiroharu Kato
 
Future of Web Development
Future of Web DevelopmentFuture of Web Development
Future of Web DevelopmentZeno Rocha
 
Elasticsearch sur Azure : Make sense of your (BIG) data !
Elasticsearch sur Azure : Make sense of your (BIG) data !Elasticsearch sur Azure : Make sense of your (BIG) data !
Elasticsearch sur Azure : Make sense of your (BIG) data !Microsoft
 
『繋がり』を見る: Cytoscapeと周辺ツールを使ったグラフデータ可視化入門
『繋がり』を見る: Cytoscapeと周辺ツールを使ったグラフデータ可視化入門『繋がり』を見る: Cytoscapeと周辺ツールを使ったグラフデータ可視化入門
『繋がり』を見る: Cytoscapeと周辺ツールを使ったグラフデータ可視化入門Keiichiro Ono
 
GIS and Google Earth In Geography
GIS and Google Earth In GeographyGIS and Google Earth In Geography
GIS and Google Earth In GeographyOllie Bray
 

Similar to Bokeh Tutorial - PyData @ Strata 2015 (20)

Interactive Visualization With Bokeh (SF Python Meetup)
Interactive Visualization With Bokeh (SF Python Meetup)Interactive Visualization With Bokeh (SF Python Meetup)
Interactive Visualization With Bokeh (SF Python Meetup)
 
Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012Web mapping with vector data. Is it the future ? 2012
Web mapping with vector data. Is it the future ? 2012
 
8th TUC Meeting – Yinglong Xia (Huawei), Big Graph Analytics Engine
8th TUC Meeting – Yinglong Xia (Huawei), Big Graph Analytics Engine8th TUC Meeting – Yinglong Xia (Huawei), Big Graph Analytics Engine
8th TUC Meeting – Yinglong Xia (Huawei), Big Graph Analytics Engine
 
Mining the Geo Needles in the Social Haystack
Mining the Geo Needles in the Social HaystackMining the Geo Needles in the Social Haystack
Mining the Geo Needles in the Social Haystack
 
Device deployment
Device deploymentDevice deployment
Device deployment
 
How to look like a model? MongoDB for Rails apps
How to look like a model? MongoDB for Rails appsHow to look like a model? MongoDB for Rails apps
How to look like a model? MongoDB for Rails apps
 
Eventsourcing with PHP and MongoDB
Eventsourcing with PHP and MongoDBEventsourcing with PHP and MongoDB
Eventsourcing with PHP and MongoDB
 
Radical Collaboration: Tools for Partnering with Community Members
Radical Collaboration: Tools for Partnering with Community MembersRadical Collaboration: Tools for Partnering with Community Members
Radical Collaboration: Tools for Partnering with Community Members
 
Introduction To R
Introduction To RIntroduction To R
Introduction To R
 
AWS Elastic Beanstalk
AWS Elastic BeanstalkAWS Elastic Beanstalk
AWS Elastic Beanstalk
 
(APP203) How Sumo Logic and Anki Build Highly Resilient Services on AWS to Ma...
(APP203) How Sumo Logic and Anki Build Highly Resilient Services on AWS to Ma...(APP203) How Sumo Logic and Anki Build Highly Resilient Services on AWS to Ma...
(APP203) How Sumo Logic and Anki Build Highly Resilient Services on AWS to Ma...
 
2010 financieel jaarverslag
2010 financieel jaarverslag2010 financieel jaarverslag
2010 financieel jaarverslag
 
Eficiency and Low Cost: Pro Tips for you to save 50% of your money with Googl...
Eficiency and Low Cost: Pro Tips for you to save 50% of your money with Googl...Eficiency and Low Cost: Pro Tips for you to save 50% of your money with Googl...
Eficiency and Low Cost: Pro Tips for you to save 50% of your money with Googl...
 
[第2回3D勉強会 研究紹介] Neural 3D Mesh Renderer (CVPR 2018)
[第2回3D勉強会 研究紹介] Neural 3D Mesh Renderer (CVPR 2018)[第2回3D勉強会 研究紹介] Neural 3D Mesh Renderer (CVPR 2018)
[第2回3D勉強会 研究紹介] Neural 3D Mesh Renderer (CVPR 2018)
 
Future of Web Development
Future of Web DevelopmentFuture of Web Development
Future of Web Development
 
Elasticsearch sur Azure : Make sense of your (BIG) data !
Elasticsearch sur Azure : Make sense of your (BIG) data !Elasticsearch sur Azure : Make sense of your (BIG) data !
Elasticsearch sur Azure : Make sense of your (BIG) data !
 
MateriApps LIVE! の設定
MateriApps LIVE! の設定MateriApps LIVE! の設定
MateriApps LIVE! の設定
 
『繋がり』を見る: Cytoscapeと周辺ツールを使ったグラフデータ可視化入門
『繋がり』を見る: Cytoscapeと周辺ツールを使ったグラフデータ可視化入門『繋がり』を見る: Cytoscapeと周辺ツールを使ったグラフデータ可視化入門
『繋がり』を見る: Cytoscapeと周辺ツールを使ったグラフデータ可視化入門
 
Pilot Interim Results
Pilot Interim ResultsPilot Interim Results
Pilot Interim Results
 
GIS and Google Earth In Geography
GIS and Google Earth In GeographyGIS and Google Earth In Geography
GIS and Google Earth In Geography
 

More from Peter Wang

Rethinking Decentralization / Whither Privacy?
Rethinking Decentralization / Whither Privacy?Rethinking Decentralization / Whither Privacy?
Rethinking Decentralization / Whither Privacy?Peter Wang
 
Rethinking OSS In An Era of Cloud and ML
Rethinking OSS In An Era of Cloud and MLRethinking OSS In An Era of Cloud and ML
Rethinking OSS In An Era of Cloud and MLPeter Wang
 
Python for Data: Past, Present, Future (PyCon JP 2017 Keynote)
Python for Data: Past, Present, Future (PyCon JP 2017 Keynote)Python for Data: Past, Present, Future (PyCon JP 2017 Keynote)
Python for Data: Past, Present, Future (PyCon JP 2017 Keynote)Peter Wang
 
Command line Data Tools
Command line Data ToolsCommand line Data Tools
Command line Data ToolsPeter Wang
 
Stories, Myth, and the Humane Network
Stories, Myth, and the Humane NetworkStories, Myth, and the Humane Network
Stories, Myth, and the Humane NetworkPeter Wang
 
Thoughts on Business & Startups
Thoughts on Business & StartupsThoughts on Business & Startups
Thoughts on Business & StartupsPeter Wang
 
PyData Texas 2015 Keynote
PyData Texas 2015 KeynotePyData Texas 2015 Keynote
PyData Texas 2015 KeynotePeter Wang
 
PyData: Past, Present Future (PyData SV 2014 Keynote)
PyData: Past, Present Future (PyData SV 2014 Keynote)PyData: Past, Present Future (PyData SV 2014 Keynote)
PyData: Past, Present Future (PyData SV 2014 Keynote)Peter Wang
 
Python's Role in the Future of Data Analysis
Python's Role in the Future of Data AnalysisPython's Role in the Future of Data Analysis
Python's Role in the Future of Data AnalysisPeter Wang
 

More from Peter Wang (9)

Rethinking Decentralization / Whither Privacy?
Rethinking Decentralization / Whither Privacy?Rethinking Decentralization / Whither Privacy?
Rethinking Decentralization / Whither Privacy?
 
Rethinking OSS In An Era of Cloud and ML
Rethinking OSS In An Era of Cloud and MLRethinking OSS In An Era of Cloud and ML
Rethinking OSS In An Era of Cloud and ML
 
Python for Data: Past, Present, Future (PyCon JP 2017 Keynote)
Python for Data: Past, Present, Future (PyCon JP 2017 Keynote)Python for Data: Past, Present, Future (PyCon JP 2017 Keynote)
Python for Data: Past, Present, Future (PyCon JP 2017 Keynote)
 
Command line Data Tools
Command line Data ToolsCommand line Data Tools
Command line Data Tools
 
Stories, Myth, and the Humane Network
Stories, Myth, and the Humane NetworkStories, Myth, and the Humane Network
Stories, Myth, and the Humane Network
 
Thoughts on Business & Startups
Thoughts on Business & StartupsThoughts on Business & Startups
Thoughts on Business & Startups
 
PyData Texas 2015 Keynote
PyData Texas 2015 KeynotePyData Texas 2015 Keynote
PyData Texas 2015 Keynote
 
PyData: Past, Present Future (PyData SV 2014 Keynote)
PyData: Past, Present Future (PyData SV 2014 Keynote)PyData: Past, Present Future (PyData SV 2014 Keynote)
PyData: Past, Present Future (PyData SV 2014 Keynote)
 
Python's Role in the Future of Data Analysis
Python's Role in the Future of Data AnalysisPython's Role in the Future of Data Analysis
Python's Role in the Future of Data Analysis
 

Recently uploaded

6 Tips for Interpretable Topic Models _ by Nicha Ruchirawat _ Towards Data Sc...
6 Tips for Interpretable Topic Models _ by Nicha Ruchirawat _ Towards Data Sc...6 Tips for Interpretable Topic Models _ by Nicha Ruchirawat _ Towards Data Sc...
6 Tips for Interpretable Topic Models _ by Nicha Ruchirawat _ Towards Data Sc...Dr Arash Najmaei ( Phd., MBA, BSc)
 
DATA ANALYSIS using various data sets like shoping data set etc
DATA ANALYSIS using various data sets like shoping data set etcDATA ANALYSIS using various data sets like shoping data set etc
DATA ANALYSIS using various data sets like shoping data set etclalithasri22
 
Rabobank_Exploring the Impact of Graph Technology on Financial Services.pdf
Rabobank_Exploring the Impact of Graph Technology on Financial Services.pdfRabobank_Exploring the Impact of Graph Technology on Financial Services.pdf
Rabobank_Exploring the Impact of Graph Technology on Financial Services.pdfNeo4j
 
IBEF report on the Insurance market in India
IBEF report on the Insurance market in IndiaIBEF report on the Insurance market in India
IBEF report on the Insurance market in IndiaManalVerma4
 
Adobe Scan 06-Mar-2024 (1).pdf shavashwvw
Adobe Scan 06-Mar-2024 (1).pdf shavashwvwAdobe Scan 06-Mar-2024 (1).pdf shavashwvw
Adobe Scan 06-Mar-2024 (1).pdf shavashwvws73678sri
 
Inference rules in artificial intelligence
Inference rules in artificial intelligenceInference rules in artificial intelligence
Inference rules in artificial intelligencePriyadharshiniG41
 
prediction of default payment next month using a logistic approach
prediction of default payment next month using a logistic approachprediction of default payment next month using a logistic approach
prediction of default payment next month using a logistic approachAdekunleJoseph4
 
Film cover research.pptx for media courseowrk
Film cover research.pptx for media courseowrkFilm cover research.pptx for media courseowrk
Film cover research.pptx for media courseowrk494f574xmv
 
Predictive Analysis - Using Insight-informed Data to Plan Inventory in Next 6...
Predictive Analysis - Using Insight-informed Data to Plan Inventory in Next 6...Predictive Analysis - Using Insight-informed Data to Plan Inventory in Next 6...
Predictive Analysis - Using Insight-informed Data to Plan Inventory in Next 6...ThinkInnovation
 
Digital Indonesia Report 2024 by We Are Social .pdf
Digital Indonesia Report 2024 by We Are Social .pdfDigital Indonesia Report 2024 by We Are Social .pdf
Digital Indonesia Report 2024 by We Are Social .pdfNicoChristianSunaryo
 
Decoding Movie Sentiments: Analyzing Reviews with Data Analysis model
Decoding Movie Sentiments: Analyzing Reviews with Data Analysis modelDecoding Movie Sentiments: Analyzing Reviews with Data Analysis model
Decoding Movie Sentiments: Analyzing Reviews with Data Analysis modelBoston Institute of Analytics
 
testingsdadadadaaddadadadadadadadaad.pdf
testingsdadadadaaddadadadadadadadaad.pdftestingsdadadadaaddadadadadadadadaad.pdf
testingsdadadadaaddadadadadadadadaad.pdfDSP Mutual Fund
 
Statistics For Management by Richard I. Levin 8ed.pdf
Statistics For Management by Richard I. Levin 8ed.pdfStatistics For Management by Richard I. Levin 8ed.pdf
Statistics For Management by Richard I. Levin 8ed.pdfnikeshsingh56
 
Adobe Scan 06-Mar-2024 (1).pdfwvsbbsbsba
Adobe Scan 06-Mar-2024 (1).pdfwvsbbsbsbaAdobe Scan 06-Mar-2024 (1).pdfwvsbbsbsba
Adobe Scan 06-Mar-2024 (1).pdfwvsbbsbsbas73678sri
 
Data Discovery With Power Query in excel
Data Discovery With Power Query in excelData Discovery With Power Query in excel
Data Discovery With Power Query in excelKapilSidhpuria3
 
Neo4j_Exploring the Impact of Graph Technology on Financial Services.pdf
Neo4j_Exploring the Impact of Graph Technology on Financial Services.pdfNeo4j_Exploring the Impact of Graph Technology on Financial Services.pdf
Neo4j_Exploring the Impact of Graph Technology on Financial Services.pdfNeo4j
 
why-transparency-and-traceability-are-essential-for-sustainable-supply-chains...
why-transparency-and-traceability-are-essential-for-sustainable-supply-chains...why-transparency-and-traceability-are-essential-for-sustainable-supply-chains...
why-transparency-and-traceability-are-essential-for-sustainable-supply-chains...Jack Cole
 
Role of Consumer Insights in business transformation
Role of Consumer Insights in business transformationRole of Consumer Insights in business transformation
Role of Consumer Insights in business transformationAnnie Melnic
 

Recently uploaded (19)

6 Tips for Interpretable Topic Models _ by Nicha Ruchirawat _ Towards Data Sc...
6 Tips for Interpretable Topic Models _ by Nicha Ruchirawat _ Towards Data Sc...6 Tips for Interpretable Topic Models _ by Nicha Ruchirawat _ Towards Data Sc...
6 Tips for Interpretable Topic Models _ by Nicha Ruchirawat _ Towards Data Sc...
 
DATA ANALYSIS using various data sets like shoping data set etc
DATA ANALYSIS using various data sets like shoping data set etcDATA ANALYSIS using various data sets like shoping data set etc
DATA ANALYSIS using various data sets like shoping data set etc
 
2023 Survey Shows Dip in High School E-Cigarette Use
2023 Survey Shows Dip in High School E-Cigarette Use2023 Survey Shows Dip in High School E-Cigarette Use
2023 Survey Shows Dip in High School E-Cigarette Use
 
Rabobank_Exploring the Impact of Graph Technology on Financial Services.pdf
Rabobank_Exploring the Impact of Graph Technology on Financial Services.pdfRabobank_Exploring the Impact of Graph Technology on Financial Services.pdf
Rabobank_Exploring the Impact of Graph Technology on Financial Services.pdf
 
IBEF report on the Insurance market in India
IBEF report on the Insurance market in IndiaIBEF report on the Insurance market in India
IBEF report on the Insurance market in India
 
Adobe Scan 06-Mar-2024 (1).pdf shavashwvw
Adobe Scan 06-Mar-2024 (1).pdf shavashwvwAdobe Scan 06-Mar-2024 (1).pdf shavashwvw
Adobe Scan 06-Mar-2024 (1).pdf shavashwvw
 
Inference rules in artificial intelligence
Inference rules in artificial intelligenceInference rules in artificial intelligence
Inference rules in artificial intelligence
 
prediction of default payment next month using a logistic approach
prediction of default payment next month using a logistic approachprediction of default payment next month using a logistic approach
prediction of default payment next month using a logistic approach
 
Film cover research.pptx for media courseowrk
Film cover research.pptx for media courseowrkFilm cover research.pptx for media courseowrk
Film cover research.pptx for media courseowrk
 
Predictive Analysis - Using Insight-informed Data to Plan Inventory in Next 6...
Predictive Analysis - Using Insight-informed Data to Plan Inventory in Next 6...Predictive Analysis - Using Insight-informed Data to Plan Inventory in Next 6...
Predictive Analysis - Using Insight-informed Data to Plan Inventory in Next 6...
 
Digital Indonesia Report 2024 by We Are Social .pdf
Digital Indonesia Report 2024 by We Are Social .pdfDigital Indonesia Report 2024 by We Are Social .pdf
Digital Indonesia Report 2024 by We Are Social .pdf
 
Decoding Movie Sentiments: Analyzing Reviews with Data Analysis model
Decoding Movie Sentiments: Analyzing Reviews with Data Analysis modelDecoding Movie Sentiments: Analyzing Reviews with Data Analysis model
Decoding Movie Sentiments: Analyzing Reviews with Data Analysis model
 
testingsdadadadaaddadadadadadadadaad.pdf
testingsdadadadaaddadadadadadadadaad.pdftestingsdadadadaaddadadadadadadadaad.pdf
testingsdadadadaaddadadadadadadadaad.pdf
 
Statistics For Management by Richard I. Levin 8ed.pdf
Statistics For Management by Richard I. Levin 8ed.pdfStatistics For Management by Richard I. Levin 8ed.pdf
Statistics For Management by Richard I. Levin 8ed.pdf
 
Adobe Scan 06-Mar-2024 (1).pdfwvsbbsbsba
Adobe Scan 06-Mar-2024 (1).pdfwvsbbsbsbaAdobe Scan 06-Mar-2024 (1).pdfwvsbbsbsba
Adobe Scan 06-Mar-2024 (1).pdfwvsbbsbsba
 
Data Discovery With Power Query in excel
Data Discovery With Power Query in excelData Discovery With Power Query in excel
Data Discovery With Power Query in excel
 
Neo4j_Exploring the Impact of Graph Technology on Financial Services.pdf
Neo4j_Exploring the Impact of Graph Technology on Financial Services.pdfNeo4j_Exploring the Impact of Graph Technology on Financial Services.pdf
Neo4j_Exploring the Impact of Graph Technology on Financial Services.pdf
 
why-transparency-and-traceability-are-essential-for-sustainable-supply-chains...
why-transparency-and-traceability-are-essential-for-sustainable-supply-chains...why-transparency-and-traceability-are-essential-for-sustainable-supply-chains...
why-transparency-and-traceability-are-essential-for-sustainable-supply-chains...
 
Role of Consumer Insights in business transformation
Role of Consumer Insights in business transformationRole of Consumer Insights in business transformation
Role of Consumer Insights in business transformation
 

Bokeh Tutorial - PyData @ Strata 2015

  • 1. Bokeh Tutorial PyData @ Strata 2015 Peter Wang Continuum Analytics @pwang
  • 2. Agenda • Overview of Bokeh - 30 min • What & why • Demos • Q&A (5 min) • Exercises - 50 min • First plots & charts • Tools & tooltips • Linked plots • Architecture overview • Q&A - 10 min
  • 3. Bokeh Overview • Novel graphics • Interactive visualization • Streaming, dynamic, large data • For the browser, with or without a server • No need to write Javascript
  • 5. Interactive • Dragging & zooming, with linking • Selections that can round-trip to server • Resize, entirely on client side • Flexible hover http://bokeh.pydata.org/en/latest/docs/gallery.html
  • 11. New Release! v0.8 http://continuum.io/blog/bokeh-0.8 • R, Julia, Scala, Lua support! • Improved Charts interface, added "chart builders" concept • Support for custom styling of hover tooltips • AjaxDataSource
  • 12. How to Help & Contribute • Open source BSD license for everything (JS, Python, server) • Use it and provide feedback • Contribute to dev! (Hack on Starter Isssues) • Designer? Front-end dev? Get in touch! • Engage us to work on custom visual exploration apps & dashboards • Not just code integration - also provide visualization expertise • Helps the open source efforts @bokehplots
  • 13. Additional Demos • Population demo (examples/glyphs/population_server.py) • Animation • Tables: examples/glyphs/data_tables.py • Scatter histogram: examples/plotting/server/selection_histogram.py • Notebooks • Linked brushing • Interact() widgets • NBViewer gallery
  • 15. Exercise 1 - Simple plots • Line: http://bokeh.pydata.org/en/latest/tutorial/ basic.html#drawing-lines • Charts • Date axis in stock chart example • Builders, horizons • Diagonal plot
  • 16. Exercise 2 - Tools and Tooltips • User guide on Tools • Hover tool exercise: 
 http://bokeh.pydata.org/en/latest/tutorial/basic.html#id6
  • 17. Exercise 3 - Linked Plots Notebooks: • https://github.com/bokeh/bokeh/blob/master/examples/ plotting/notebook/linked_panning.ipynb • https://github.com/bokeh/bokeh/blob/master/examples/ plotting/notebook/linked_brushing.ipynb
  • 19. Previous: Javascript code generation server.py Browser js_str = """ <d3.js> <highchart.js> <etc.js> """ plot.js.template App Model D3 highcharts flot crossfilter etc. ... One-shot; no MVC interaction; no data streaming HTML
  • 20. BokehJS • Full-fledged dynamic, interactive plotting engine • materializes a reactive scenegraph from JSON • optionally push/pull state from server, using websockets • HTML5 Canvas, backbone.js, coffeescript, AMD, plays with JSfiddle, … ! “We wrote JavaScript, so you don’t have to.”
  • 21. bokeh.py & bokeh.js server.py BrowserApp Model bokeh.py object graph JSON BokehJS object graph
  • 22. bokeh.py & bokeh.js server.py BrowserApp Model BokehJS object graph bokeh-server bokeh.py object graph JSON
  • 24. iris.html! <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>iris.py example</title> <link rel="stylesheet" href="../../../../../anaconda/envs/bokehdemo/lib/python2.7/site-packages/bokeh/server/static/css/bokeh.min.css" type="text/css" /> <script type="text/javascript" src="../../../../../anaconda/envs/bokehdemo/lib/python2.7/site-packages/bokeh/server/static/js/bokeh.min.js"></script> <script type="text/javascript"> $(function() { var all_models = [{"attributes": {"column_names": ["fill_color", "line_color", "x", "y"], "doc": null, "selected": [], "discrete_ranges": {}, "cont_ranges": {}, "data": {"line_color": ["red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue"], "x": [1.4, 1.4, 1.3, 1.5, 1.4, 1.7, 1.4, 1.5, 1.4, 1.5, 1.5, 1.6, 1.4, 1.1, 1.2, 1.5, 1.3, 1.4, 1.7, 1.5, 1.7, 1.5, 1.0, 1.7, 1.9, 1.6, 1.6, 1.5, 1.4, 1.6, 1.6, 1.5, 1.5, 1.4, 1.5, 1.2, 1.3, 1.4, 1.3, 1.5, 1.3, 1.3, 1.3, 1.6, 1.9, 1.4, 1.6, 1.4, 1.5, 1.4, 4.7, 4.5, 4.9, 4.0, 4.6, 4.5, 4.7, 3.3, 4.6, 3.9, 3.5, 4.2, 4.0, 4.7, 3.6, 4.4, 4.5, 4.1, 4.5, 3.9, 4.8, 4.0, 4.9, 4.7, 4.3, 4.4, 4.8, 5.0, 4.5, 3.5, 3.8, 3.7, 3.9, 5.1, 4.5, 4.5, 4.7, 4.4, 4.1, 4.0, 4.4, 4.6, 4.0, 3.3, 4.2, 4.2, 4.2, 4.3, 3.0, 4.1, 6.0, 5.1, 5.9, 5.6, 5.8, 6.6, 4.5, 6.3, 5.8, 6.1, 5.1, 5.3, 5.5, 5.0, 5.1, 5.3, 5.5, 6.7, 6.9, 5.0, 5.7, 4.9, 6.7, 4.9, 5.7, 6.0, 4.8, 4.9, 5.6, 5.8, 6.1, 6.4, 5.6, 5.1, 5.6, 6.1, 5.6, 5.5, 4.8, 5.4, 5.6, 5.1, 5.1, 5.9, 5.7, 5.2, 5.0, 5.2, 5.4, 5.1], "fill_color": ["red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "green", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue"], "y": [0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2, 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3, 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8]}, "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, "type": "ColumnDataSource", "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, "columns": ["x"]}], "id": "bbaf66fb-48b8-474a-8dae-910a995186f6", "doc": null}, "type": "DataRange1d", "id": "bbaf66fb-48b8-474a-8dae-910a995186f6"}, {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, "columns": ["y"]}], "id": "8377dd3b-9c4e-41ce-8930-76a92a68e907", "doc": null}, "type": "DataRange1d", "id": "8377dd3b-9c4e-41ce-8930-76a92a68e907"}, {"attributes": {"doc": null, "id": "24c8ae7c-f3c8-4c88-9f5d-dcbe59506791"}, "type": "BasicTickFormatter", "id": "24c8ae7c-f3c8-4c88-9f5d-dcbe59506791"}, {"attributes": {"doc": null, "id": "3720fa34-cea8-4b54-a51b-c738a1ef96fb"}, "type": "BasicTicker", "id": "3720fa34-cea8-4b54-a51b-c738a1ef96fb"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "doc": null, "bounds": "auto", "id": "0ae2ae05-3abd-414a-9840-c5e804de9661", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "24c8ae7c-f3c8-4c88-9f5d-dcbe59506791"}, "ticker": {"type": "BasicTicker", "id": "3720fa34-cea8-4b54-a51b-c738a1ef96fb"}, "dimension": 0}, "type": "LinearAxis", "id": "0ae2ae05-3abd-414a-9840-c5e804de9661"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "doc": null, "axis": {"type": "LinearAxis", "id": "0ae2ae05-3abd-414a-9840-c5e804de9661"}, "id": "25d48bf1-6583-4aff-9e47-dd57e304fb7a", "dimension": 0}, "type": "Grid", "id": "25d48bf1-6583-4aff-9e47-dd57e304fb7a"}, {"attributes": {"doc": null, "id": "d88bdf6f-b1a7-49c1-b71e-df2c1156f202"}, "type": "BasicTickFormatter", "id": "d88bdf6f-b1a7-49c1-b71e-df2c1156f202"}, {"attributes": {"doc": null, "id": "434ab651-0a3a-4bab-aa7a-34844b833bce"}, "type": "BasicTicker", "id": "434ab651-0a3a-4bab-aa7a-34844b833bce"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "doc": null, "bounds": "auto", "id": "53cf6b9d-1c82-48d2-8094-5a81fed497d9", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "d88bdf6f-b1a7-49c1-b71e-df2c1156f202"}, "ticker": {"type": "BasicTicker", "id": "434ab651-0a3a-4bab-aa7a-34844b833bce"}, "dimension": 1}, "type": "LinearAxis", "id": "53cf6b9d-1c82-48d2-8094-5a81fed497d9"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "doc": null, "axis": {"type": "LinearAxis", "id": "53cf6b9d-1c82-48d2-8094-5a81fed497d9"}, "id": "21bd25eb-22d3-427c-a6a3-5e3afc96cc2a", "dimension": 1}, "type": "Grid", "id": "21bd25eb-22d3-427c-a6a3-5e3afc96cc2a"}, {"attributes": {"data_source": {"type": "ColumnDataSource", "id": "5e71b46a-0d81-4a18-8402-188816471c0c"}, "server_data_source": null, "doc": null, "nonselection_glyphspec": {"line_color": {"value": "#1f77b4"}, "angle_units": "deg", "fill_color": {"value": "#1f77b4"}, "visible": null, "line_dash_offset": 0, "line_join": "miter", "size": {"units": "screen", "value": 10}, "line_alpha": {"units": "data", "value": 0.1}, "radius_units": "screen", "end_angle_units": "deg", "valign": null, "length_units": "screen", "start_angle_units": "deg", "line_cap": "butt", "line_dash": [], "line_width": {"units": "data", "field": "line_width"}, "type": "circle", "fill_alpha": {"units": "data", "value": 0.1}, "halign": null, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "margin": null}, "xdata_range": null, "ydata_range": null, "glyphspec": {"line_color": {"units": "data", "field": "line_color"}, "line_alpha": {"units": "data", "value": 1.0}, "fill_color": {"units": "data", "field": "fill_color"}, "line_width": {"units": "data", "field": "line_width"}, "fill_alpha": {"units": "data", "value": 0.2}, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "type": "circle", "size": {"units": "screen", "value": 10}}, "id": "093300cf-6759-4449-877b-7731476588a0"}, "type": "Glyph", "id": "093300cf-6759-4449-877b-7731476588a0"}, {"attributes": {"plot": null, "doc": null, "renderers": [{"type": "Glyph", "id": "093300cf-6759-4449-877b-7731476588a0"}], "id": "9a60e0da-efe5-4b08-a4f6-7ed315d67b9b"}, "type": "BoxSelectTool", "id": "9a60e0da-efe5-4b08-a4f6-7ed315d67b9b"}, {"attributes": {"doc": null, "tool": {"type": "BoxSelectTool", "id": "9a60e0da-efe5-4b08-a4f6-7ed315d67b9b"}, "id": "5a0e8c76-4893-452b-b2e8-cefb1a232437"}, "type": "BoxSelection", "id": "5a0e8c76-4893-452b-b2e8-cefb1a232437"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "dimensions": ["width", "height"], "doc": null, "id": "a4b154c7-b674-4f86-93f8-770cf7a0d9b5"}, "type": "PanTool", "id": "a4b154c7- b674-4f86-93f8-770cf7a0d9b5"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "dimensions": ["width", "height"], "doc": null, "id": "3ba5854b-e047-47c2-989b-15b5b79cb205"}, "type": "WheelZoomTool", "id": "3ba5854b-e047-47c2-989b-15b5b79cb205"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "id": "0a583af8-4db5-45ea-b09b-16562035ccc4", "doc": null}, "type": "PreviewSaveTool", "id": "0a583af8-4db5-45ea-b09b-16562035ccc4"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "id": "5621f214-17c9-417f-aaed-f841745f489f", "doc": null}, "type": "ResizeTool", "id": "5621f214-17c9-417f-aaed-f841745f489f"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "id": "98be8a66-dfaa-4f2d-95cd-0296a3647da1", "doc": null}, "type": "ResetTool", "id": "98be8a66-dfaa-4f2d-95cd-0296a3647da1"}, {"attributes": {"outer_height": 600, "x_range": {"type": "DataRange1d", "id": "bbaf66fb-48b8-474a-8dae-910a995186f6"}, "y_range": {"type": "DataRange1d", "id": "8377dd3b-9c4e-41ce-8930-76a92a68e907"}, "outer_width": 600, "renderers": [{"type": "LinearAxis", "id": "0ae2ae05-3abd-414a-9840-c5e804de9661"}, {"type": "Grid", "id": "25d48bf1-6583-4aff-9e47-dd57e304fb7a"}, {"type": "LinearAxis", "id": "53cf6b9d-1c82-48d2-8094-5a81fed497d9"}, {"type": "Grid", "id": "21bd25eb-22d3-427c-a6a3-5e3afc96cc2a"}, {"type": "BoxSelection", "id": "6451a3a2-d1d7-401e-8ec6-ed92c626f448"}, {"type": "BoxSelection", "id": "5a0e8c76-4893-452b-b2e8-cefb1a232437"}, {"type": "Glyph", "id": "093300cf-6759-4449-877b-7731476588a0"}], "id": "iris", "data_sources": [], "doc": null, "canvas_height": 600, "title": "Plot", "tools": [{"type": "PanTool", "id": "a4b154c7-b674-4f86-93f8-770cf7a0d9b5"}, {"type": "WheelZoomTool", "id": "3ba5854b-e047-47c2-989b-15b5b79cb205"}, {"type": "BoxZoomTool", "id": "a047dc9b-0dd1-4883-8575-550cd63409fa"}, {"type": "PreviewSaveTool", "id": "0a583af8-4db5-45ea- b09b-16562035ccc4"}, {"type": "ResizeTool", "id": "5621f214-17c9-417f-aaed-f841745f489f"}, {"type": "BoxSelectTool", "id": "9a60e0da-efe5-4b08-a4f6-7ed315d67b9b"}, {"type": "ResetTool", "id": "98be8a66-dfaa-4f2d-95cd-0296a3647da1"}], "canvas_width": 600}, "type": "Plot", "id": "iris"}, {"attributes": {"plot": {"type": "Plot", "id": "iris"}, "id": "a047dc9b-0dd1-4883-8575-550cd63409fa", "doc": null}, "type": "BoxZoomTool", "id": "a047dc9b-0dd1-4883-8575-550cd63409fa"}, {"attributes": {"doc": null, "tool": {"type": "BoxZoomTool", "id": "a047dc9b-0dd1-4883-8575-550cd63409fa"}, "id": "6451a3a2-d1d7-401e-8ec6-ed92c626f448"}, "type": "BoxSelection", "id": "6451a3a2-d1d7-401e-8ec6-ed92c626f448"}, {"attributes": {"doc": null, "children": [{"type": "Plot", "id": "iris"}], "id": "475ad0da-baf5-48be-902b-166b060b6978"}, "type": "PlotContext", "id": "475ad0da-baf5-48be-902b-166b060b6978"}]; var modelid = "475ad0da-baf5-48be-902b-166b060b6978"; var modeltype = "PlotContext"; var elementid = "8bb1deb5-74cb-4b28-b44f-c89dc5701d69"; console.log(modelid, modeltype, elementid); Bokeh.load_models(all_models); var model = Bokeh.Collections(modeltype).get(modelid); var view = new model.default_view({model: model, el: '#8bb1deb5-74cb-4b28-b44f-c89dc5701d69'}); }); </script> </head> <body> <div class="plotdiv" id="8bb1deb5-74cb-4b28-b44f-c89dc5701d69">Plots</div> </body> </html>
  • 25. iris.html (detail) <head> <meta charset="utf-8"> <title>iris.py example</title> <link rel="stylesheet" href="../bokeh/server/static/css/bokeh.min.css" type="text/css" /> <script type="text/javascript" src=“../bokeh/server/static/js/bokeh.min.js"></script> <script type=“text/javascript”> $(function() { var all_models = [JSON data] var modelid = "475ad0da-baf5-48be-902b-166b060b6978"; var modeltype = "PlotContext"; var elementid = "8bb1deb5-74cb-4b28-b44f-c89dc5701d69"; console.log(modelid, modeltype, elementid); Bokeh.load_models(all_models); var model = Bokeh.Collections(modeltype).get(modelid); var view = new model.default_view({ model: model, el: '#8bb1deb5-74cb-4b28-b44f-c89dc5701d69'}); }); </script> </head> <body> <div class="plotdiv" id="8bb1deb5-74cb-4b28-b44f-c89dc5701d69">Plots</div> </body> </html>
  • 26. JSON { "attributes": { "sources": [ { "source": { "type": "ColumnDataSource", "id": "5e71b46a-0d81-4a18-8402-188816471c0c" }, "columns": [ "x" ] } ], "id": "bbaf66fb-48b8-474a-8dae-910a995186f6", "doc": null }, "type": "DataRange1d", "id": "bbaf66fb-48b8-474a-8dae-910a995186f6" },
  • 27. Other languages can generate JSON... bokeh.r! bokeh.h
 bokeh.m
 bokeh.java
 ...