等值线图 Vega-lite 的滑块

Question

我想在 vega-lite 中为我的欧洲叶绿素地图添加一个滑块，以按年份过滤数据。我目前有一张地图只显示 2019 年的数据（颜色编码），我正在尝试制作一个滑块，以便我可以更改年份并查看颜色如何随时间变化。

到目前为止，这是我的代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 300,
  "data": {
    "url": "https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson",
    "format": {"type": "topojson", "feature": "europe"}
  },
  "transform": [
    {
      "lookup": "properties.NAME",
      "from": {
        "data": {
          "url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
        },
        "key": "country",
        "fields": ["percentage"]
      }
    }
  ],
    "params": [
    {
      "name": "year",
      "value": 2019,
      "bind": {
        "input": "range",
        "min": 1985,
        "max": 2019,
        "step": 1,
        "name": "Select the year:"
      }
    }
  ],
  "projection": {"type": "naturalEarth1"},
  "mark": "geoshape",
  "encoding": {
    "color": {
      "field": "percentage", 
      "type": "quantitative"},
    "tooltip": [
      {"field": "properties.NAME",      "type": "nominal", "title": "country"},
      {"field": "percentage", "type": "quantitative"}
    ]
  }
}

我已经能够使用在我移动 slider.The {"filter": "datum.year==year"} 时更新的相同数据制作条形图条形图能够做到这一点，但是它在我的 chloropeth 地图上不起作用（我试图将它添加到两者的“转换”数组中，我的条形图成功了）。这是我的条形图的代码，以备不时之需。

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

    "description": "",

    "title": {
      "text": "Thisisatest",
      "subtitle":
        "hellohello Source: OurWorldInData",
      "subtitleFontStyle": "italic",
      "subtitleFontSize": 10,
      "anchor": "start",
      "color": "black"
    },
  
        "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": "range",
        "min": 1985,
        "max": 2019,
        "step": 1,
        "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"}
      ]
    }
    
}

我做错了什么？将不胜感激任何帮助！ :)

谢谢

Answer 1

这几乎是正确的，但在您的 lookup 转换中，您需要提供最终数据中需要的字段，例如 year 字段。由于没有年份字段，filter 转换无效。

以下为修改后的配置或参考editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 300,
  "data": {
    "url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
  },
  "transform": [
    {
      "lookup": "country",
      "from": {
        "data": {
          "url": "https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson",
          "format": {"type": "topojson", "feature": "europe"}
        },
        "key": "properties.NAME",
        "fields": ["properties", "type", "geometry"]
      }
    },
    {"filter": "datum.year==year"}
  ],
  "params": [
    {
      "name": "year",
      "value": 2019,
      "bind": {
        "input": "range",
        "min": 1985,
        "max": 2030,
        "step": 1,
        "name": "Select the year:"
      }
    }
  ],
  "projection": {"type": "naturalEarth1"},
  "mark": "geoshape",
  "encoding": {
    "color": {"field": "percentage", "type": "quantitative"},
    "tooltip": [
      {"field": "properties.NAME", "type": "nominal", "title": "country"},
      {"field": "percentage", "type": "quantitative"}
    ]
  }
}

编辑

我把主要数据和查找数据倒过来了，好像把你们国家的所有年份都带上了。让我知道这是否有效。

等值线图 Vega-lite 的滑块

Slider for chloropeth map Vega-lite

vega-lite

vega

vega-embed