Skip to content

Commit 62fb524

Browse files
ianthomas23ianthomas23
authored
Simplify example (#36)
1 parent 633e4cf commit 62fb524

File tree

16 files changed

+145
-225
lines changed

16 files changed

+145
-225
lines changed

‎README.md

+27
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,30 @@ npm pack
2020

2121
This will produce the file `bokeh-bokehjs-3.8.0-dev.1.tgz` which should be copied to the root
2222
directory of the bokehjs-examples repository.
23+
24+
---
25+
26+
```ts
27+
import * as Bokeh from "@bokeh/bokehjs";
28+
29+
function create_bokehjs_plot(): Bokeh.Plotting.Figure {
30+
// Create figure
31+
const plot = Bokeh.Plotting.figure({
32+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
33+
});
34+
35+
// Calculate x, y value of sine curve
36+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
37+
const y = x.map(x => Math.sin(Math.PI*x/6));
38+
39+
// Plot circles
40+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
41+
42+
return plot;
43+
}
44+
45+
// Render plot in <div>
46+
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
47+
```
48+
49+
<img alt="Example plot" src="example.png">

‎ci/tests/example.spec.ts

-3
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ test('loads bokehjs', async ({ page }) => {
1717
test('is interactive', async ({ page }) => {
1818
await page.goto('/');
1919

20-
for (var i = 0; i < 20; i++) {
21-
await page.locator('.bk-Button').click();
22-
}
2320
// Take screenshot
2421

2522
const boxZoom = await page.getByTitle('Box Zoom').click();

‎ci/typescript/create_angular_ng.sh

+9-17
Original file line numberDiff line numberDiff line change
@@ -34,29 +34,21 @@ cat > src/app/bokeh-js/bokeh-js.component.ts << EOF
3434
import { Component, OnInit } from '@angular/core'
3535
import * as Bokeh from "@bokeh/bokehjs";
3636
37-
function create_bokehjs_plot(): Bokeh.Column {
38-
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
39-
37+
function create_bokehjs_plot(): Bokeh.Plotting.Figure {
38+
// Create figure
4039
const plot = Bokeh.Plotting.figure({
41-
title: "Example BokehJS plot", height: 500, width: 500,
42-
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
40+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
4341
});
4442
45-
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
43+
// Calculate x, y value of sine curve
44+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
45+
const y = x.map(x => Math.sin(Math.PI*x/6));
4646
47-
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
48-
function button_callback() {
49-
const data = source.data as any;
50-
data.x.push(Math.random());
51-
data.y.push(Math.random());
52-
data.size.push(10 + Math.random()*30);
53-
source.change.emit();
54-
}
55-
button.on_click(button_callback);
47+
// Plot circles
48+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
5649
57-
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
50+
return plot;
5851
}
59-
6052
@Component({
6153
selector: 'app-bokeh-js',
6254
imports: [],

‎ci/typescript/create_react_vite.sh

+9-17
Original file line numberDiff line numberDiff line change
@@ -66,29 +66,21 @@ import * as Bokeh from "@bokeh/bokehjs";
6666
6767
console.info("BokehJS version:", Bokeh.version);
6868
69-
function create_bokehjs_plot(): Bokeh.Column {
70-
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
71-
69+
function create_bokehjs_plot(): Bokeh.Plotting.Figure {
70+
// Create figure
7271
const plot = Bokeh.Plotting.figure({
73-
title: "Example BokehJS plot", height: 500, width: 500,
74-
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
72+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
7573
});
7674
77-
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
75+
// Calculate x, y value of sine curve
76+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
77+
const y = x.map(x => Math.sin(Math.PI*x/6));
7878
79-
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
80-
function button_callback() {
81-
const data = source.data as any;
82-
data.x.push(Math.random());
83-
data.y.push(Math.random());
84-
data.size.push(10 + Math.random()*30);
85-
source.change.emit();
86-
}
87-
button.on_click(button_callback);
79+
// Plot circles
80+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
8881
89-
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
82+
return plot;
9083
}
91-
9284
export function BokehComponent() {
9385
const shown = useRef(false);
9486
useEffect(() => {

‎ci/typescript/create_vanilla_rspack.sh

+9-17
Original file line numberDiff line numberDiff line change
@@ -109,29 +109,21 @@ import * as Bokeh from "@bokeh/bokehjs";
109109
110110
console.info("BokehJS version:", Bokeh.version);
111111
112-
function create_bokehjs_plot(): Bokeh.Column {
113-
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
114-
112+
function create_bokehjs_plot(): Bokeh.Plotting.Figure {
113+
// Create figure
115114
const plot = Bokeh.Plotting.figure({
116-
title: "Example BokehJS plot", height: 500, width: 500,
117-
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
115+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
118116
});
119117
120-
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
118+
// Calculate x, y value of sine curve
119+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
120+
const y = x.map(x => Math.sin(Math.PI*x/6));
121121
122-
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
123-
function button_callback() {
124-
const data = source.data as any;
125-
data.x.push(Math.random());
126-
data.y.push(Math.random());
127-
data.size.push(10 + Math.random()*30);
128-
source.change.emit();
129-
}
130-
button.on_click(button_callback);
122+
// Plot circles
123+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
131124
132-
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
125+
return plot;
133126
}
134-
135127
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
136128
EOF
137129

‎ci/typescript/create_vanilla_vite.sh

+9-17
Original file line numberDiff line numberDiff line change
@@ -43,29 +43,21 @@ import * as Bokeh from "@bokeh/bokehjs";
4343
4444
console.info("BokehJS version:", Bokeh.version);
4545
46-
function create_bokehjs_plot(): Bokeh.Column {
47-
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
48-
46+
function create_bokehjs_plot(): Bokeh.Plotting.Figure {
47+
// Create figure
4948
const plot = Bokeh.Plotting.figure({
50-
title: "Example BokehJS plot", height: 500, width: 500,
51-
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
49+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
5250
});
5351
54-
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
52+
// Calculate x, y value of sine curve
53+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
54+
const y = x.map(x => Math.sin(Math.PI*x/6));
5555
56-
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
57-
function button_callback() {
58-
const data = source.data as any;
59-
data.x.push(Math.random());
60-
data.y.push(Math.random());
61-
data.size.push(10 + Math.random()*30);
62-
source.change.emit();
63-
}
64-
button.on_click(button_callback);
56+
// Plot circles
57+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
6558
66-
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
59+
return plot;
6760
}
68-
6961
document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`<div id='target'>Hello</div>\`;
7062
7163
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");

‎ci/typescript/create_vanilla_webpack.sh

+9-17
Original file line numberDiff line numberDiff line change
@@ -110,29 +110,21 @@ import * as Bokeh from "@bokeh/bokehjs";
110110
111111
console.info("BokehJS version:", Bokeh.version);
112112
113-
function create_bokehjs_plot(): Bokeh.Column {
114-
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
115-
113+
function create_bokehjs_plot(): Bokeh.Plotting.Figure {
114+
// Create figure
116115
const plot = Bokeh.Plotting.figure({
117-
title: "Example BokehJS plot", height: 500, width: 500,
118-
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
116+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
119117
});
120118
121-
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
119+
// Calculate x, y value of sine curve
120+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
121+
const y = x.map(x => Math.sin(Math.PI*x/6));
122122
123-
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
124-
function button_callback() {
125-
const data = source.data as any;
126-
data.x.push(Math.random());
127-
data.y.push(Math.random());
128-
data.size.push(10 + Math.random()*30);
129-
source.change.emit();
130-
}
131-
button.on_click(button_callback);
123+
// Plot circles
124+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
132125
133-
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
126+
return plot;
134127
}
135-
136128
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
137129
EOF
138130

‎ci/typescript/create_vue_vite.sh

+9-17
Original file line numberDiff line numberDiff line change
@@ -58,29 +58,21 @@ import * as Bokeh from "@bokeh/bokehjs";
5858
5959
const ref = useTemplateRef('target')
6060
61-
function create_bokehjs_plot(): Bokeh.Column {
62-
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
63-
61+
function create_bokehjs_plot(): Bokeh.Plotting.Figure {
62+
// Create figure
6463
const plot = Bokeh.Plotting.figure({
65-
title: "Example BokehJS plot", height: 500, width: 500,
66-
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
64+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
6765
});
6866
69-
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
67+
// Calculate x, y value of sine curve
68+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
69+
const y = x.map(x => Math.sin(Math.PI*x/6));
7070
71-
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
72-
function button_callback() {
73-
const data = source.data as any;
74-
data.x.push(Math.random());
75-
data.y.push(Math.random());
76-
data.size.push(10 + Math.random()*30);
77-
source.change.emit();
78-
}
79-
button.on_click(button_callback);
71+
// Plot circles
72+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
8073
81-
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
74+
return plot;
8275
}
83-
8476
onMounted(() => {
8577
console.info("BokehJS version:", Bokeh.version);
8678
Bokeh.Plotting.show(create_bokehjs_plot(), ref.value);

‎example.png

120 KB
Loading

‎recipes/src/recipes/typescript/common.ts

+10-18
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,20 @@ export const baseTypeScriptExample = {
1515
import: 'import * as Bokeh from "@bokeh/bokehjs";\n',
1616
version: 'console.info("BokehJS version:", Bokeh.version);\n',
1717
function:
18-
`function create_bokehjs_plot(): Bokeh.Column {
19-
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
20-
18+
`function create_bokehjs_plot(): Bokeh.Plotting.Figure {
19+
// Create figure
2120
const plot = Bokeh.Plotting.figure({
22-
title: "Example BokehJS plot", height: 500, width: 500,
23-
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
21+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
2422
});
2523
26-
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
24+
// Calculate x, y value of sine curve
25+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
26+
const y = x.map(x => Math.sin(Math.PI*x/6));
2727
28-
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
29-
function button_callback() {
30-
const data = source.data as any;
31-
data.x.push(Math.random());
32-
data.y.push(Math.random());
33-
data.size.push(10 + Math.random()*30);
34-
source.change.emit();
35-
}
36-
button.on_click(button_callback);
28+
// Plot circles
29+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
3730
38-
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
39-
}
40-
`,
31+
return plot;
32+
}`,
4133
show: (target: string = '"#target"') => 'Bokeh.Plotting.show(create_bokehjs_plot(), ' + target + ');\n'
4234
};

‎typescript/angular_ng/README.md

+9-17
Original file line numberDiff line numberDiff line change
@@ -35,29 +35,21 @@ The Angular web framework includes its own builder `ng` in the `@angular/cli` pa
3535
import { Component, OnInit } from '@angular/core'
3636
import * as Bokeh from "@bokeh/bokehjs";
3737
38-
function create_bokehjs_plot(): Bokeh.Column {
39-
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
40-
38+
function create_bokehjs_plot(): Bokeh.Plotting.Figure {
39+
// Create figure
4140
const plot = Bokeh.Plotting.figure({
42-
title: "Example BokehJS plot", height: 500, width: 500,
43-
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
41+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
4442
});
4543
46-
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
44+
// Calculate x, y value of sine curve
45+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
46+
const y = x.map(x => Math.sin(Math.PI*x/6));
4747
48-
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
49-
function button_callback() {
50-
const data = source.data as any;
51-
data.x.push(Math.random());
52-
data.y.push(Math.random());
53-
data.size.push(10 + Math.random()*30);
54-
source.change.emit();
55-
}
56-
button.on_click(button_callback);
48+
// Plot circles
49+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
5750
58-
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
51+
return plot;
5952
}
60-
6153
@Component({
6254
selector: 'app-bokeh-js',
6355
imports: [],

‎typescript/react_vite/README.md

+9-17
Original file line numberDiff line numberDiff line change
@@ -73,29 +73,21 @@ Create an initial basic project using `create-vite`.
7373
7474
console.info("BokehJS version:", Bokeh.version);
7575
76-
function create_bokehjs_plot(): Bokeh.Column {
77-
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
78-
76+
function create_bokehjs_plot(): Bokeh.Plotting.Figure {
77+
// Create figure
7978
const plot = Bokeh.Plotting.figure({
80-
title: "Example BokehJS plot", height: 500, width: 500,
81-
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
79+
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
8280
});
8381
84-
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
82+
// Calculate x, y value of sine curve
83+
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
84+
const y = x.map(x => Math.sin(Math.PI*x/6));
8585
86-
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
87-
function button_callback() {
88-
const data = source.data as any;
89-
data.x.push(Math.random());
90-
data.y.push(Math.random());
91-
data.size.push(10 + Math.random()*30);
92-
source.change.emit();
93-
}
94-
button.on_click(button_callback);
86+
// Plot circles
87+
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});
9588
96-
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
89+
return plot;
9790
}
98-
9991
export function BokehComponent() {
10092
const shown = useRef(false);
10193
useEffect(() => {

0 commit comments

Comments
 (0)