1

Following the example on the website: https://vega.github.io/editor/#/examples/vega-lite/interactive_bar_select_highlight

I want to programmatically set the selections via signals. I realize that I could emulate a click by doing the following

VEGA_DEBUG.view.signal("select_tuple", {"unit":"","fields":[{"type":"E","field":"_vgsid_"}],"values":[1]})

However, I cannot proceed to select another, e.g., the shift select of the 2

VEGA_DEBUG.view.signal("select_tuple", {"unit":"","fields":[{"type":"E","field":"_vgsid_"}],"values":[2]})

This makes sense, since only shift-click accumulates the state.

I tried modifying the accumulated signal

VEGA_DEBUG.view.signal("select", {"_vgsid_":[1,2],"vlMulti":{"or":[{"_vgsid_":1},{"_vgsid_":2}]}})

However, this does not help. Is this not possible? I understand that a custom solution may be possible in hand-rolled vega, as opposed to that compiled from vega-lite.

Thanks.

yifanwu
  • 1,595
  • 3
  • 14
  • 25

2 Answers2

1

Just need to set VEGA_DEBUG.view.signal("select_toggle", true) before adding the new select!!

yifanwu
  • 1,595
  • 3
  • 14
  • 25
0

After much research I made this example of how to change the vega-lite brush programmatically

https://observablehq.com/@john-guerra/update-vega-lite-brush-programmatically

Using @koaning example this stack overflow question I figured that you can change the brush by updating "brush_y" (assuming that your selection is called brush) or change the selection using "brush_tuple" (which doesn't seem to update the brush mark)

viewof chart = {
  const brush = vl.selectInterval("brush").encodings("y");

  const base = vl
    .markBar()
    .select(brush)
    .encode(
      vl.x().count(),
      vl.y().fieldQ("Horsepower"),
      vl.color().if(brush, vl.value("steelblue")).value("gray")
    )
    .height(maxY);

  return base.data(data).render();
}

update = {
  // From https://codepen.io/keckelt/pen/bGNQPYq?editors=1111
  // brush_y -> brush_tuple -> brush
  // Updates on pixels
  chart.signal("brush_y", [by0, maxY / 2]);
  await chart.runAsync();
}

Crossposting here in case it might be useful for anyone