Search code examples
jsonfiltervega-litedot-plot

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


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!


Solution

  • Here you go.

    enter image description here

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