Skip to content

Simplify example #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 29, 2025
Merged

Simplify example #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,30 @@ npm pack

This will produce the file `bokeh-bokehjs-3.8.0-dev.1.tgz` which should be copied to the root
directory of the bokehjs-examples repository.

---

```ts
import * as Bokeh from "@bokeh/bokehjs";

function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return plot;
}

// Render plot in <div>
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
```

<img alt="Example plot" src="example.png">
3 changes: 0 additions & 3 deletions ci/tests/example.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,6 @@ test('loads bokehjs', async ({ page }) => {
test('is interactive', async ({ page }) => {
await page.goto('/');

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

const boxZoom = await page.getByTitle('Box Zoom').click();
Expand Down
26 changes: 9 additions & 17 deletions ci/typescript/create_angular_ng.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,29 +34,21 @@ cat > src/app/bokeh-js/bokeh-js.component.ts << EOF
import { Component, OnInit } from '@angular/core'
import * as Bokeh from "@bokeh/bokehjs";

function create_bokehjs_plot(): Bokeh.Column {
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
data.y.push(Math.random());
data.size.push(10 + Math.random()*30);
source.change.emit();
}
button.on_click(button_callback);
// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
return plot;
}

@Component({
selector: 'app-bokeh-js',
imports: [],
Expand Down
26 changes: 9 additions & 17 deletions ci/typescript/create_react_vite.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,29 +66,21 @@ import * as Bokeh from "@bokeh/bokehjs";

console.info("BokehJS version:", Bokeh.version);

function create_bokehjs_plot(): Bokeh.Column {
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
data.y.push(Math.random());
data.size.push(10 + Math.random()*30);
source.change.emit();
}
button.on_click(button_callback);
// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
return plot;
}

export function BokehComponent() {
const shown = useRef(false);
useEffect(() => {
Expand Down
26 changes: 9 additions & 17 deletions ci/typescript/create_vanilla_rspack.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,29 +109,21 @@ import * as Bokeh from "@bokeh/bokehjs";

console.info("BokehJS version:", Bokeh.version);

function create_bokehjs_plot(): Bokeh.Column {
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
data.y.push(Math.random());
data.size.push(10 + Math.random()*30);
source.change.emit();
}
button.on_click(button_callback);
// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
return plot;
}

Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
EOF

Expand Down
26 changes: 9 additions & 17 deletions ci/typescript/create_vanilla_vite.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,29 +43,21 @@ import * as Bokeh from "@bokeh/bokehjs";

console.info("BokehJS version:", Bokeh.version);

function create_bokehjs_plot(): Bokeh.Column {
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
data.y.push(Math.random());
data.size.push(10 + Math.random()*30);
source.change.emit();
}
button.on_click(button_callback);
// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
return plot;
}

document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`<div id='target'>Hello</div>\`;

Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
Expand Down
26 changes: 9 additions & 17 deletions ci/typescript/create_vanilla_webpack.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,29 +110,21 @@ import * as Bokeh from "@bokeh/bokehjs";

console.info("BokehJS version:", Bokeh.version);

function create_bokehjs_plot(): Bokeh.Column {
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
data.y.push(Math.random());
data.size.push(10 + Math.random()*30);
source.change.emit();
}
button.on_click(button_callback);
// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
return plot;
}

Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
EOF

Expand Down
26 changes: 9 additions & 17 deletions ci/typescript/create_vue_vite.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,29 +58,21 @@ import * as Bokeh from "@bokeh/bokehjs";

const ref = useTemplateRef('target')

function create_bokehjs_plot(): Bokeh.Column {
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
data.y.push(Math.random());
data.size.push(10 + Math.random()*30);
source.change.emit();
}
button.on_click(button_callback);
// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
return plot;
}

onMounted(() => {
console.info("BokehJS version:", Bokeh.version);
Bokeh.Plotting.show(create_bokehjs_plot(), ref.value);
Expand Down
Binary file added example.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 10 additions & 18 deletions recipes/src/recipes/typescript/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,20 @@ export const baseTypeScriptExample = {
import: 'import * as Bokeh from "@bokeh/bokehjs";\n',
version: 'console.info("BokehJS version:", Bokeh.version);\n',
function:
`function create_bokehjs_plot(): Bokeh.Column {
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

`function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
data.y.push(Math.random());
data.size.push(10 + Math.random()*30);
source.change.emit();
}
button.on_click(button_callback);
// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
}
`,
return plot;
}`,
show: (target: string = '"#target"') => 'Bokeh.Plotting.show(create_bokehjs_plot(), ' + target + ');\n'
};
26 changes: 9 additions & 17 deletions typescript/angular_ng/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,29 +35,21 @@ The Angular web framework includes its own builder `ng` in the `@angular/cli` pa
import { Component, OnInit } from '@angular/core'
import * as Bokeh from "@bokeh/bokehjs";

function create_bokehjs_plot(): Bokeh.Column {
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
data.y.push(Math.random());
data.size.push(10 + Math.random()*30);
source.change.emit();
}
button.on_click(button_callback);
// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
return plot;
}

@Component({
selector: 'app-bokeh-js',
imports: [],
Expand Down
26 changes: 9 additions & 17 deletions typescript/react_vite/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,29 +73,21 @@ Create an initial basic project using `create-vite`.

console.info("BokehJS version:", Bokeh.version);

function create_bokehjs_plot(): Bokeh.Column {
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

function create_bokehjs_plot(): Bokeh.Plotting.Figure {
// Create figure
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
title: "Example BokehJS plot", height: 500, sizing_mode: "stretch_width"
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
// Calculate x, y value of sine curve
const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const y = x.map(x => Math.sin(Math.PI*x/6));

const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
data.y.push(Math.random());
data.size.push(10 + Math.random()*30);
source.change.emit();
}
button.on_click(button_callback);
// Plot circles
plot.scatter(x, y, {color: "blue", size: 30, fill_alpha: 0.4});

return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
return plot;
}

export function BokehComponent() {
const shown = useRef(false);
useEffect(() => {
Expand Down
Loading