Bokeh: desarrollo con JavaScript
La biblioteca Bokeh Python y las bibliotecas para otros lenguajes como R, Scala y Julia interactúan principalmente con BokehJS a un alto nivel. Un programador de Python no tiene que preocuparse por JavaScript o el desarrollo web. Sin embargo, se puede utilizar la API de BokehJS para realizar un desarrollo de JavaScript puro utilizando BokehJS directamente.
Los objetos BokehJS, como glifos y widgets, se crean de manera más o menos similar a la API de Bokeh Python. Normalmente, cualquier ClassName de Python está disponible comoBokeh.ClassNamedesde JavaScript. Por ejemplo, un objeto Range1d obtenido en Python.
xrange = Range1d(start=-0.5, end=20.5)Se obtiene de forma equivalente con BokehJS como:
var xrange = new Bokeh.Range1d({ start: -0.5, end: 20.5 });Seguir el código JavaScript cuando está incrustado en un archivo HTML genera un diagrama de línea simple en el navegador.
Primero incluya todas las bibliotecas de BokehJS en la sección <head> .. </head> de la página web como se muestra a continuación
<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>En la sección del cuerpo que sigue a los fragmentos de JavaScript, construya varias partes de un gráfico Bokeh.
<script>
// create some data and a ColumnDataSource
var x = Bokeh.LinAlg.linspace(-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_line_color: null });
var yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
plot.add_layout(xaxis, "below");
plot.add_layout(yaxis, "left");
// add a Line glyph
var line = new Bokeh.Line({
x: { field: "x" },
y: { field: "y" },
line_color: "#666699",
line_width: 2
});
plot.add_glyph(line, source);
Bokeh.Plotting.show(plot);
</script>Guarde el código anterior como una página web y ábralo en un navegador de su elección.
