Brushing and linking between vega panes

Panel
1

The final step in the tutorial that we’re trying to create, is to have brushing and linking functionality between different plots. This is actually the reason why we ended up going for panel.

What we are looking for in the end is to have brushing/linking between a node-link network diagram and a scatterplot of some metadata of the nodes. Brushing/linking is easy in VegaLite but you can’t create node-link diagrams in it; you can create these in Vega, but then brushing/linking is very complicated.
So it is my hope to be able to do this via panel: one pane with a Vega node-link diagram, and one pane with a VegaLite or Vega scatterplot. Hovering over a point in the scatterplot should highlight the corresponding node and vice versa.

Let’s say that the data looks like this:

nodes: [
  {id: 1, a: 1, b: 1}
  {id: 2, a: 1, b: 1}
  {id: 3, a: 1, b: 1}]
links: [
  {source: 1, target: 2},
  {source: 1, target: 3}
]

The scatterplot could show a vs b.

I can imagine this being possible by defining a variable somewhere that holds the selected id(s), but how to capture this from within the plot…

@Marc : maybe you have an idea?

Thank you!
jan.

2

Nope . Not yet. The interactivity between charts is not something i’ve learned yet.

But i’m going learn it. I’m also a Tableau user an in Tableau i often have 2-5 plots that are connected somehow.

3

I have created what I think is a minimal script for brushing/linking 2 scatterplots, by creating a simple version in VegaLite, taking the compiled Vega and removing as much as possible without it braking:

In order to make this work with the left plot being a force-directed node-link diagram, I can’t approach this in exactly the same way as with 2 scatterplots (my_selection_Miles_per_Gallon wouldn’t work, for example).

From this code, there are some things that I can’t find a lot of documentation about but which I think are crucial:

  • line 25: what does vlSelectionResolve do exactly?
  • line 149-153: why does this signal need the "channel": "x", "type": "R"? And what does the R stand for?
  • line 200: "modify(\"my_selection_store\", my_selection_tuple, true)" What does modify do exactly?
  • line 258: "vlSelectionTest(\"my_selection_store\", datum). This obviously tests if the datapoint is in my_selection_store. But how does it do that exactly? Looking at what my_selection_store looks like, it something like this:
unit => "plot0"
fields =>
  [{"field":"Weight_in_lbs","channel":"x","type":"R"}, 
   {"field":"Miles_per_Gallon","channel":"y","type":"R"}]
values =>
  [[3586.1718749999995,4878.671875],
   [22.749999999999996,10.749999999999998]]

rather than a list with datapoint IDs. It seems that this is where the issue might lie when I try to convert this to working with networks.

1 Like