如何从可视化项访问基础数据

Question

我正在使用 vega-lite 生成可视化。

viz 包括以下变换：

        {
            calculate: "year(datum['Order Date'])",
            as: "Year"
        },

我希望允许用户根据该字段的值过滤可视化项。例如，我想给我的用户一个包含 2018、2019、2020 和 2021 的菜单，并允许他们选择一个。

vega（或 vega-lite）是否公开允许我根据数据以编程方式获取此过滤器的有效值的函数？ （例如 2018 年、2019 年、2020 年和 2021 年）。

我的替代方法是自己解析数据，并重新实现 vega-lite 已经在幕后执行的计算逻辑。我偶然发现了 vega 库中公开的 loader 和 inferTypes 函数，这使我可以稍微检查数据，但这些对生成的字段没有帮助（例如，通过 calculate 转换）。

另一种选择是为上述calculate 转换创建具有不同聚合的可视化项，并刮取生成的可视化项，但这似乎有点太老套了。

Answer 1

您可以将params 到bind 与select 输入一起使用，该输入可以有一个下拉选项。可以使用element 配置将此输入附加到任何元素。然后，在 filter 转换中使用这些值来过滤掉您的数据。

下面是一个示例配置或参考editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "",
  "data": {
    "url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
  },
  "height": 300,
  "width": 350,
  "mark": {"type": "bar", "color": "skyblue"},
  "transform": [
    {"filter": "datum.year==year"},
    {
      "filter": {
        "field": "country",
        "oneOf": [
          "United Kingdom",
          "Spain",
          "France",
          "Netherlands",
          "Portugal",
          "Italy",
          "Poland",
          "Albania",
          "Germany",
          "Belgium",
          "Austria",
          "Denmark"
        ]
      }
    }
  ],
  "params": [
    {
      "name": "year",
      "value": 2019,
      "bind": {
        "input": "select",
        "options": ["2015", "2016", "2018", "2019", "2020", "2021"],
        "name": "Select the year:"
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "percentage",
      "type": "quantitative",
      "title": "Percentage of low carbon energy",
      "axis": {"grid": false}
    },
    "x": {
      "field": "country",
      "type": "nominal",
      "title": "",
      "axis": {"grid": false, "labelAngle": 20},
      "sort": "-y"
    },
    "tooltip": [
      {"field": "country", "title": "Country"},
      {"field": "percentage", "title": "percentage of low carbon energy"}
    ]
  }
}

编辑

要获取数据，您只需将 vega api 用作view.data('source_0')，其中 source_0 是数据查看器中的数据名称。要设置或添加数据，请使用相同的 api，但第二个参数为 view.data('source_0', data)。请参阅documentation 了解更多信息。

我的建议是使用上面示例中所做的 params 方法，您不需要在 vega 中创建下拉列表。您可以在外部拥有自己的下拉菜单，并使用 API 更新视图参数。

请参考以下使用 API 更改参数的示例，并且我已经在控制台上记录了数据，以防您更喜欢其他方法或参考 fiddle：

var yourVlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "",
  "data": {
    "url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
  },
  "height": 300,
  "width": 350,
  "mark": {"type": "bar", "color": "skyblue"},
  "transform": [
    {"filter": "datum.year==year"},
    {
      "filter": {
        "field": "country",
        "oneOf": [
          "United Kingdom",
          "Spain",
          "France",
          "Netherlands",
          "Portugal",
          "Italy",
          "Poland",
          "Albania",
          "Germany",
          "Belgium",
          "Austria",
          "Denmark"
        ]
      }
    }
  ],
  "params": [
    {
      "name": "year",
      "value": 2018
    }
  ],
  "encoding": {
    "y": {
      "field": "percentage",
      "type": "quantitative",
      "title": "Percentage of low carbon energy",
      "axis": {"grid": false}
    },
    "x": {
      "field": "country",
      "type": "nominal",
      "title": "",
      "axis": {"grid": false, "labelAngle": 20},
      "sort": "-y"
    },
    "tooltip": [
      {"field": "country", "title": "Country"},
      {"field": "percentage", "title": "percentage of low carbon energy"}
    ]
  }
}
var view;
vegaEmbed("#vis", yourVlSpec).then(res => {
    view = res.view;
  //To get the data
  console.log(view.data('source_0'));
  
});

/* To set the Data
view.data('source_0',[new data to be set]);
*/

function handleChange(a,b){
var selectValue = document.getElementById("myselect").value;
//Set the param name value dynamically.
view.signal('year',selectValue)
view.runAsync();
}

 <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2/build/vega.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0/build/vega-lite.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.17.0/build/vega-embed.min.js"></script>

<select id="myselect" style="width:100px;" onchange="handleChange()">
  <option>2018</option>
  <option>2019</option>
  <option>2020</option>
</select>
<br>
<div id="vis"></div>