json 如何在Vega Lite中将年份滑块添加到该范围点图?

bnlyeluc  于 2023-01-14  发布在  其他
关注(0)|答案(1)|浏览(162)

我有一个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年之一”,但是这使得可视化消失了。
我觉得我很接近解决方案,但几个小时后不能完全弄清楚。任何帮助是非常感谢!

icnyk63a

icnyk63a1#

给你。

{
  "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}
      }
    }
  ]
}

相关问题