互动式Vega-Lite / Vega图表与选择

时间:2018-12-19 23:51:07

标签: data-visualization visualization vega vega-lite

我正在尝试构建一个交互式的Vega-lite仪表板,在该仪表板上我获得了世界地图vega editor link

基于选择的国家/地区,我试图在下方显示另一个图表(vconcat或外部)

是否可以在不使用vconcat的情况下在此图表之外进行操作,或者只能通过vconcat进行操作?

有人尝试过类似的方法吗?

2 个答案:

答案 0 :(得分:1)

最简单的方法是使用vconcat创建。

也就是说,有一种方法可以读取所选内容的基础Vega信号。然后,您可以使用Vega View API触发回调,该回调基于所选数据显示另一个图表。

答案 1 :(得分:1)

您现在可以使用可观察的笔记本来实现所需的功能。

您在一个单元格中创建第一个图表,将其链接到第二个单元格,然后将其导出到网站中。

这是从observable开始的方法

这是代码的核心部分

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;
  }
)