Retrieving value of selector in vega lite 'live'

1

Hello,

I would like to use the value of a selector in vega lite as an input to another cell, similar to the demo here https://beta.observablehq.com/@mbostock/d3-brushable-scatterplot

Here’s a super simple example:

in which I would like selection_value to update as the use mouseovers on the chart.

Is this possible? Any help greatly appreciated.

Robin

2 Likes
2

I think I’ve figured it out - see here:

I must admit, I’m not sure I fully understand this, or whether it’s the best way to do it!

1 Like
3

I recommend using view.addSignalListener as a way of listening directly to the signal, rather than listening to interface events. Here’s an example:

2 Likes
4

Thank you, really appreciated. I thought there was likely to be a better way.

5

I’d been wondering about this too, so this is helpful. One thing: the value seems to not always update correctly. For instance, hovering on B only seems to update to B a fraction of the time. Maybe this is a quirk about how vega reads hover events?

6

Yeah, that’s weird. I’m not familiar enough with Vega to know immediately what could cause this behavior, but if I remember I’ll investigate further and possibly file an issue with them.

Edit: the strange behavior seems to be caused by the "nearest": true setting on the selection. Removing this field produces more expected behavior.

7

This is a feature of the vega lite spec I provided, which as Mike said, probably shouldn’t have "nearest": true. If you look carefully, what’s happening is that vega is finding the nearest ‘top of the bar’ to the cursor. So if you move your cursor near to the top of the ‘b’ bar, it will update correctly.

8

Question: What about the scenario where the Vega-lite chart is contained as a child to an HTML div within a cell?

eg: html <div>${cell reference to vegalite object}</div>

Found it: This notebook is a good example: