{
const { figure, show } = Bokeh.Plotting;
const { Select, Dropdown } = Bokeh.Widgets;
const p = figure({ width: 300, height: 300 });
const x = d3.range(100).map(() => Math.random());
const y = d3.range(100).map(() => Math.random());
const r = p.circle({ x, y, color: "blue" });
const select = new Select({
value: "blue",
options: ["blue", "red", "green"]
});
select.change.connect(
(_, sender) => (r.glyph.line_color = r.glyph.fill_color = sender.value)
);
const dropdown = new Dropdown({
menu: ["blue", "red", "green"]
});
dropdown.js_event_callbacks["menu_item_click"] = [
{
execute: (args) => select.value = r.glyph.line_color = r.glyph.fill_color = args.item
}
];
// This also works:
//
// dropdown.js_event_callbacks["menu_item_click"] = [
// new Bokeh.CustomJS({
// args: { select, dropdown, r },
// code: "select.value = r.glyph.line_color = r.glyph.fill_color = this.item"
// })
// ];
const div = html`<div></div>`;
show(new Bokeh.Column({ children: [select, dropdown, p] }), div);
return div;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
