我如何在 Vega Lite 中的这个 Ranged Dot Plot 中添加一个年份滑块？答案

【问题标题】：How can I add a year slider to this Ranged Dot Plot in Vega Lite?我如何在 Vega Lite 中的这个 Ranged Dot Plot 中添加一个年份滑块？
【发布时间】：2023-01-12 23:54:27
【问题描述】：

我有一个包含 2000-2019 年相关值的数据集，当我使用此规范加载图表时：

"data": {
    "name": "chart6",
    "url": "https://raw.githubusercontent.com/sebaconstable/sebaconstable.github.io/main/chart6data.csv"
  },
  "height": 300,
  "width": 450,
  "encoding": {
    "x": {
      "field": "average years in school",
      "type": "quantitative",
      "scale": {"domain": [0, 20]},
      "title": "Average Years in School"
    },
    "y": {
      "field": "Country",
      "type": "nominal",
      "axis": {"offset": 5, "ticks": false, "minExtent": 70, "domain": false}
    }
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "detail": {"field": "Country", "type": "nominal"},
        "color": {"value": "#BBBBBB"}
      }      
    },
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "tooltip": [
          {"field": "Country", "type": "nominal", "title": "Country"},
          {"field": "QuintGap", "type": "quantitative", "title": "Difference between richest and poorest quintile"},
          {"field": "Median % Pop", "type": "nominal", "title": "Median % of population in CCT programmes (2000-2019)"}
        ],
        "color": {
          "field": "Quintile",
          "type": "nominal",
          "title": null,
          "scale": {"scheme": "inferno"}
        },
        "size": {
          "field": "Median % Pop",
          "type": "quantitative",
          "legend":null,
          "scale": {"range": [10, 100]}
        },
        "opacity": {"value": 1}
      }
    }
  ]
}

每年的分数出现在每个国家。我想让它有一个年份滑块，然后只显示所选年份的两个点。

我尝试了很多东西。我补充道：

  "transform": [
    {"filter": {"field": "Quintile", "oneOf": ["Poorest Quintile", "Richest Quintile"]}},
    {"filter": "datum.Year==selecta"}
  ],
  "params": [
    {
      "name": "selecta",
      "value": [{"year":2019}],
      "bind": {
        "input": "range",
        "min": 2000,
        "max": 2019,
        "step": 1,
        "name": "Select year:"
      }
    }
 ],

此代码位于第一个编码之上，并成功创建了一个滑块（正确过滤到相关数据），但图表的其余部分消失了。我还尝试为 20 年的“oneOf”添加一个过滤器，但这使可视化消失了。

我觉得我已经很接近解决方案了，但几个小时后还是想不通。任何帮助深表感谢！

【问题讨论】：

我现在提供答案。如果它解决了您的问题，请标记为已解决。

标签： json filter vega-lite dot-plot

【解决方案1】：

干得好。

{
  "data": {
    "name": "chart6",
    "url": "https://raw.githubusercontent.com/sebaconstable/sebaconstable.github.io/main/chart6data.csv"
  },
  "transform": [{"filter": "datum.Year==selecta"}],
  "params": [
    {
      "name": "selecta",
      "value": [2019],
      "bind": {
        "input": "range",
        "min": 2000,
        "max": 2019,
        "step": 1,
        "name": "Select year:"
      }
    }
  ],
  "height": 300,
  "width": 450,
  "encoding": {
    "x": {
      "field": "average years in school",
      "type": "quantitative",
      "scale": {"domain": [0, 20]},
      "title": "Average Years in School"
    },
    "y": {
      "field": "Country",
      "type": "nominal",
      "axis": {"offset": 5, "ticks": false, "minExtent": 70, "domain": false}
    }
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "detail": {"field": "Country", "type": "nominal"},
        "color": {"value": "#BBBBBB"}
      }
    },
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "tooltip": [
          {"field": "Country", "type": "nominal", "title": "Country"},
          {
            "field": "QuintGap",
            "type": "quantitative",
            "title": "Difference between richest and poorest quintile"
          },
          {
            "field": "Median % Pop",
            "type": "nominal",
            "title": "Median % of population in CCT programmes (2000-2019)"
          }
        ],
        "color": {
          "field": "Quintile",
          "type": "nominal",
          "title": null,
          "scale": {"scheme": "inferno"}
        },
        "size": {
          "field": "Median % Pop",
          "type": "quantitative",
          "legend": null,
          "scale": {"range": [10, 100]}
        },
        "opacity": {"value": 1}
      }
    }
  ]
}

【讨论】：