在 vega-lite 图形之间共享数据

Question

I have a site with two vega-lite graphs that show different aspects of the same dataset, which is generated dynamically (similar to this example).我有一个带有两个 vega-lite 图形的站点，这些图形显示了动态生成的同一数据集的不同方面（类似于本示例）。 Currently they both hold their own version of this dataset.目前，他们都拥有自己的这个数据集版本。

Since the dataset tends to get quite big I would like them to share the data between them so they use less memory.由于数据集往往会变得非常大，我希望它们在它们之间共享数据，因此它们使用更少的内存。

Since the data will be updated later (from the function update_vega() ) I can't just put it into a variable and embed it in both diagrams.由于数据将在稍后更新（来自函数update_vega() ），我不能将其放入变量并将其嵌入到两个图中。

Is it possible in vega-lite to have multiple graphs sharing the same data-object and how can I do it?在 vega-lite 中是否可以让多个图形共享相同的数据对象，我该怎么做？

Here is my code (I have only been learning javascript 3 days ago, so I am very happy about feedback on every level):这是我的代码（我 3 天前才开始学习 javascript，所以我很高兴每个级别的反馈）：

<!DOCTYPE html>
<html>
<body>
<!-- setup of the vega graph -->
<script src="https://cdn.jsdelivr.net/npm/vega@5.10.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.3.2"></script>
<div id="vega_graph_one"></div>
<div id="vega_graph_two"></div>
<script>
  var vlSpec_one = {
      $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
      data: { name: 'table', values: [{"time":11, "age": 4},{"time":12, "age": 4},{"time":11, "age": 5}]},
      width: 400,
      mark: 'bar',
      encoding: {
          x: {field: 'time', type: 'quantitative', binned: true},
          y: {aggregate: "count", type: 'quantitative'},
          color: {field: 'age', type: 'quantitative'}
      }
  }
  var vlSpec_two = {
      $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
      data: { name: 'table', values: [{"time":11, "age": 4},{"time":12, "age": 4},{"time":11, "age": 5}]},
      width: 400,
      mark: 'point',
      encoding: {
          x: {field: 'time', type: 'quantitative'},
          y: {field: 'age', type: 'quantitative'},
      }
  }
  // two global variables so the view can be updated from an outside function
  var view_one;
  var view_two;
  vegaEmbed('#vega_graph_one', vlSpec_one).then(
      result => { view_one = result.view;},
      reason => { console.error(reason);}
  )
  vegaEmbed('#vega_graph_two', vlSpec_two).then(
      result => { view_two = result.view;},
      reason => { console.error(reason);}
  )

  // update the vega graph from outside

  // call with update_vega([{"time":11, "age": 4},{"time":12, "age": 4},{"time":9, "age": 6}])
  function update_vega(event_data){
      var changeSet = vega.changeset()
          .insert(
              event_data
          );
      // data dublication happense here
      view_one.change("table", changeSet).run();
      view_two.change("table", changeSet).run();
  }
</script>
</body>
</html>

Answer 1

First, consider putting your data in javascript function and call it in data, should be easier to maintain for both data and chart:首先，考虑将您的数据放在 javascript 函数中并在数据中调用它，对于数据和图表来说应该更容易维护：

function getData(){
 var mydata = [{"time":11,"age": 4},{"time":12,"age": 4},{"time":11, "age":5}];

return mydata;
}

Then you can call it:然后你可以调用它：

{
  "data": getData(),
  "mark": {"type" : "bar"}
}

There are several concepts that help achieving data sharing based on your needs.有几个概念有助于根据您的需要实现数据共享。 You need just one vegaEmbed and one vlSpec that utilizes one of the following:您只需要一个vegaEmbed和一个使用以下其中一项的vlSpec ：

Layers图层

Put data on top of all layers and refer to it from each mark's layer将数据放在所有图层的顶部，并从每个标记的图层引用它

{
  "data": {"values":getData()},
  "layer": [
   {
     "mark": {"type" : "bar"}
   },
   {
     "mark": {"type" : "point"}
   }
 ]
}

Concat康卡特

vconcat , hconcat , and concat can be used to produce multiple charts of different mark each using same data, it doesn't perfectly suite your case because you don't have the same x and y fields in every mark . vconcat 、 hconcat和concat可用于生成多个不同mark图表，每个图表都使用相同的数据，但它并不完全适合您的情况，因为每个mark x 和 y 字段都不同。 Read more on Concatenating views阅读有关串联视图的更多信息

{
  "data": {"values":getData()},
  "concat": [
   {
     "mark": {"type" : "line"},
     "encoding": {
       "x": {"field": "time"},
       "y": {"field": "age"}
     }
   },
   {
     "mark": {"type" : "bar"},
     "encoding": {
       "x": {"field": "time"},
       "y": {"field": "age"}
     }
   }
 ]
}

在 vega-lite 图形之间共享数据

问题描述

1 个解决方案

解决方案1
1 2020-05-27 23:07:19

Layers图层

Concat康卡特

在 vega-lite 图形之间共享数据

问题描述

1 个解决方案

解决方案1 1 2020-05-27 23:07:19

Layers图层

Concat康卡特

解决方案1
1 2020-05-27 23:07:19