Bokeh Tutorial
Selected Reading
- Bokeh - Discussion
- Bokeh - Useful Resources
- Bokeh - Quick Guide
- Bokeh - Developing with JavaScript
- Bokeh - WebGL
- Bokeh - Extending Bokeh
- Bokeh - Embedding Plots and Apps
- Bokeh - Exporting Plots
- Bokeh - Using Bokeh Subcommands
- Bokeh - Server
- Bokeh - Adding Widgets
- Bokeh - Customising legends
- Bokeh - Styling Visual Attributes
- Bokeh - Plot Tools
- Bokeh - Layouts
- Bokeh - Filtering Data
- Bokeh - ColumnDataSource
- Bokeh - Pandas
- Bokeh - Annotations and Legends
- Bokeh - Axes
- Bokeh - Setting Ranges
- Bokeh - Specialized Curves
- Bokeh - Wedges and Arcs
- Bokeh - Rectangle, Oval and Polygon
- Bokeh - Circle Glyphs
- Bokeh - Area Plots
- Bokeh - Plots with Glyphs
- Bokeh - Basic Concepts
- Bokeh - Jupyter Notebook
- Bokeh - Getting Started
- Bokeh - Environment Setup
- Bokeh - Introduction
- Bokeh - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bokeh - Developing with JavaScript
Bokeh - Developing with JavaScript
The Bokeh Python pbrary, and pbraries for Other Languages such as R, Scala, and Jupa, primarily interacts with BokehJS at a high level. A Python programmer does not have to worry about JavaScript or web development. However, one can use BokehJS API, to do pure JavaScript development using BokehJS directly.
BokehJS objects such as glyphs and widgets are built more or less similarly as in Bokeh Python API. Typically, any Python ClassName is available as Bokeh.ClassName from JavaScript. For example, a Range1d object as obtained in Python.
xrange = Range1d(start=-0.5, end=20.5)
It is equivalently obtained with BokehJS as −
var xrange = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
Following JavaScript code when embedded in a HTML file renders a simple pne plot in the browser.
First include all BokehJS pbraries in <head>..</head> secion of web page as below
<head> <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script> <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js"></script> <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.js"></script> <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-gl-1.3.4.min.js"></script> <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.3.4.min.js"></script> <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.3.4.min.js"></script> </head>
In the body section following snippets of JavaScript construct various parts of a Bokeh Plot.
<script>
// create some data and a ColumnDataSource
var x = Bokeh.LinAlg.pnspace(-0.5, 20.5, 10);
var y = x.map(function (v) { return v * 0.5 + 3.0; });
var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });
// make the plot
var plot = new Bokeh.Plot({
title: "BokehJS Plot",
plot_width: 400,
plot_height: 400
});
// add axes to the plot
var xaxis = new Bokeh.LinearAxis({ axis_pne_color: null });
var yaxis = new Bokeh.LinearAxis({ axis_pne_color: null });
plot.add_layout(xaxis, "below");
plot.add_layout(yaxis, "left");
// add a Line glyph
var pne = new Bokeh.Line({
x: { field: "x" },
y: { field: "y" },
pne_color: "#666699",
pne_width: 2
});
plot.add_glyph(pne, source);
Bokeh.Plotting.show(plot);
</script>
Save above code as a web page and open it in a browser of your choice.
Advertisements