Interactive vega-lite / vega chart with selection

Question

I'm trying to build an interactive vega-lite dashboard where I have got this world map vega editor link

Based on the selection of a country I'm trying to display another graph below(vconcat or outside)

Is it possible to do it outside this chart without using vconcat or I can do it only by vconcat?

Has anyone tried something similar?

Answer 1

The easiest would be to create with vconcat .

That said, there is a way to read the underlying Vega signal of the selection. Then you can use the Vega View API to trigger callback that shows another chart based on the selected data.

Answer 2

You can now use observable notebooks to achieve what you want.

You create you first chart in a cell, link it to a second cell and then export the cells in your web site.

Here's how to start in observable

Here is the central part of the code

letter_selected = Generators.observe(
  // selection_caught will (yield) a value promise with the selected letters
  function initialize_f(change_) {
    // creating an event listener (ie a function to attach to some DOM element)
    const signaled = (name, value) => change_(value);

    // attaching the event listener and naming it "test_selection"
    barChart.addSignalListener("test_selection", signaled);

    // check the doc ... https://github.com/observablehq/stdlib
    change_(barChart.signal("test_selection"));

    function dispose_f() {
      return barChart.removeSignalListener("test_selection", signaled);
    }

    return dispose_f;
  }
)