How to add simple click event with Vega-lite ObservableHQ? - vega-lite

Question

When someone clicks on points on the data, I want call custom function to show some image or information.
I am using Vega-lite in ObservableHQ notebooks and couldn't find answer?
const chart = (type)=>{
return vl
.markCircle({size: 15, opacity: 0.9})
.autosize('fit')
.data(getData(type))
.encode(
vl.x().fieldQ('slice').title('Slice'),
vl.y().fieldQ('dice').title(type).scale({domain: [0, 1.0]}),
vl.color().field('algorithm').title('Algorithm'),
vl.tooltip(['slice', 'algorithm', 'dice'])
)
}
const types = ['DSC','SDSC_2mm']
const charts = []
types.map(type => {
charts.push(chart(type))
})
return vl.vconcat(vl.hconcat(charts)).render()
}
This is the code I have in notebook.

Answer 1

If you just care about click, you can do something like the first cell in this notebook: https://observablehq.com/#visnup/vega-lite-data-out
Specifically:
clicked = Generators.observe((notify) => {
const clicked = (event, {datum}) => notify(datum);
clickable.addEventListener("click", clicked);
return () => clickable.removeEventListener("click", clicked);
})
where clickable is the name of my chart from the other cell.
A better-than-clickable example would be to do the same thing for Vega-Lite selections. I've added that to the notebook too.
selected = Generators.observe((notify) => {
const signal = Object.keys(selectable.getState({ signals: (name) => name.match(/^sel\d+$/) }).signals)[0];
const selected = (selection, predicates) => {
const within = penguins.filter(d => {
for (const [key, [min, max]] of Object.entries(predicates))
if (isNaN(+d[key]) || d[key] < min || d[key] > max)
return false;
return true;
})
notify(within);
}
selectable.addSignalListener(signal, selected);
return () => selectable.removeEventListener(signal, selected);
})