How can I add a year slider to this Ranged Dot Plot in Vega Lite?-CodePudding

I have a dataset with relevant values from 2000-2019, and when I load up the graph with this specification:

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

The points for every year appear on each country. I want to make it so it has a year slider and then only the two points for the selected year show.

I have tried many things. I added:

  "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:"
      }
    }
 ],

this code above the first encoding, and that successfully creates a slider (which filters to the relevant data correctly) however the rest of the chart disappears. I also tried adding a filter to "oneOf" the 20 years, however this made the visualisation dissapear.

I feel that I'm quite close to the solution but after several hours can't quite figure it out. Any help is much appreciated!

CodePudding user response：

Here you go.

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