ボケ-JavaScriptでの開発

Bokeh Pythonライブラリ、およびR、Scala、Juliaなどの他の言語のライブラリは、主にBokehJSと高レベルで対話します。 Pythonプログラマーは、JavaScriptやWeb開発について心配する必要はありません。ただし、BokehJS APIを使用して、BokehJSを直接使用する純粋なJavaScript開発を行うことができます。

グリフやウィジェットなどのBokehJSオブジェクトは、Bokeh Python APIとほぼ同じように構築されます。通常、Python ClassNameはJavaScriptから Bokeh.ClassName として使用できます。たとえば、Pythonで取得したRange1dオブジェクト。

xrange = Range1d(start=-0.5, end=20.5)

それはBokehJSを使って同等に得られます-

var xrange = new Bokeh.Range1d({ start: -0.5, end: 20.5 });

HTMLファイルに埋め込まれている場合、JavaScriptコードを実行すると、ブラウザに単純なラインプロットが表示されます。

最初に、以下のようにすべてのBokehJSライブラリをWebページの<head> .. </head>セクションに含めます

<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>

JavaScriptのスニペットに続くbodyセクションでは、ボケプロットのさまざまな部分を構成します。

<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>

上記のコードをWebページとして保存し、任意のブラウザーで開きます。

BokehJSライブラリ

Bokeh-developing-with-javascript

ボケ-JavaScriptでの開発