diff --git a/README.md b/README.md index 1f51687..c356bd7 100644 --- a/README.md +++ b/README.md @@ -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
+Bokeh.Plotting.show(create_bokehjs_plot(), "#target"); +``` + +Example plot diff --git a/ci/tests/example.spec.ts b/ci/tests/example.spec.ts index ff4296d..f2cb6e0 100644 --- a/ci/tests/example.spec.ts +++ b/ci/tests/example.spec.ts @@ -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(); diff --git a/ci/typescript/create_angular_ng.sh b/ci/typescript/create_angular_ng.sh index 3309bdf..705c1d4 100755 --- a/ci/typescript/create_angular_ng.sh +++ b/ci/typescript/create_angular_ng.sh @@ -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: [], diff --git a/ci/typescript/create_react_vite.sh b/ci/typescript/create_react_vite.sh index 00be89e..2e7f482 100755 --- a/ci/typescript/create_react_vite.sh +++ b/ci/typescript/create_react_vite.sh @@ -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(() => { diff --git a/ci/typescript/create_vanilla_rspack.sh b/ci/typescript/create_vanilla_rspack.sh index d6c25dc..1fac0c9 100755 --- a/ci/typescript/create_vanilla_rspack.sh +++ b/ci/typescript/create_vanilla_rspack.sh @@ -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 diff --git a/ci/typescript/create_vanilla_vite.sh b/ci/typescript/create_vanilla_vite.sh index 250c280..982291b 100755 --- a/ci/typescript/create_vanilla_vite.sh +++ b/ci/typescript/create_vanilla_vite.sh @@ -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('#app')!.innerHTML = \`
Hello
\`; Bokeh.Plotting.show(create_bokehjs_plot(), "#target"); diff --git a/ci/typescript/create_vanilla_webpack.sh b/ci/typescript/create_vanilla_webpack.sh index 06a00e8..3329950 100755 --- a/ci/typescript/create_vanilla_webpack.sh +++ b/ci/typescript/create_vanilla_webpack.sh @@ -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 diff --git a/ci/typescript/create_vue_vite.sh b/ci/typescript/create_vue_vite.sh index 9892b8f..c744959 100755 --- a/ci/typescript/create_vue_vite.sh +++ b/ci/typescript/create_vue_vite.sh @@ -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); diff --git a/example.png b/example.png new file mode 100644 index 0000000..c53672e Binary files /dev/null and b/example.png differ diff --git a/recipes/src/recipes/typescript/common.ts b/recipes/src/recipes/typescript/common.ts index 0689511..1697380 100644 --- a/recipes/src/recipes/typescript/common.ts +++ b/recipes/src/recipes/typescript/common.ts @@ -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' }; diff --git a/typescript/angular_ng/README.md b/typescript/angular_ng/README.md index 11fc104..6b7e72c 100644 --- a/typescript/angular_ng/README.md +++ b/typescript/angular_ng/README.md @@ -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: [], diff --git a/typescript/react_vite/README.md b/typescript/react_vite/README.md index 12bc936..03b561b 100644 --- a/typescript/react_vite/README.md +++ b/typescript/react_vite/README.md @@ -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(() => { diff --git a/typescript/vanilla_rspack/README.md b/typescript/vanilla_rspack/README.md index 2a86fda..f5219e8 100644 --- a/typescript/vanilla_rspack/README.md +++ b/typescript/vanilla_rspack/README.md @@ -111,29 +111,21 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed 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"); ``` diff --git a/typescript/vanilla_vite/README.md b/typescript/vanilla_vite/README.md index 49d7b3b..48336be 100644 --- a/typescript/vanilla_vite/README.md +++ b/typescript/vanilla_vite/README.md @@ -50,29 +50,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; } - document.querySelector('#app')!.innerHTML = `
Hello
`; Bokeh.Plotting.show(create_bokehjs_plot(), "#target"); diff --git a/typescript/vanilla_webpack/README.md b/typescript/vanilla_webpack/README.md index 9d17a99..fc0934d 100644 --- a/typescript/vanilla_webpack/README.md +++ b/typescript/vanilla_webpack/README.md @@ -110,29 +110,21 @@ 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"); ``` diff --git a/typescript/vue_vite/README.md b/typescript/vue_vite/README.md index 4b8aad1..41068b0 100644 --- a/typescript/vue_vite/README.md +++ b/typescript/vue_vite/README.md @@ -65,29 +65,21 @@ Create an initial basic project using `create-vite`. 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);