How to filter data using a slider in vega-lite?

user_15135322 0
Viewed 116

I am using the following code to plot a bubble plot using vega-lite. I want to transform values as I change the year value using the slider. But it's not working.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Drag the sliders to highlight points.",
  "data": {
    "url": "https://raw.githubusercontent.com/shre2398/InformationVisualization/main/gapminder.tsv",
    "format": {
      "type": "tsv"
    }
  },
  "title": {
    "text": "Gapminder Global Indicators",
    "anchor": "middle",
    "fontSize": 16,
    "fontWeight": 700
  },
  "config": {
    "axis": {
      "titleFontSize": 13,
      "titleFontWeight": "bold"
    }
  },
  "params": [{
    "name": "CurrentYear",
    "value": [{"year": 1977}],
    "select": {"type": "point", "fields": ["year"]},
    "bind": {
      "year": {"input": "range", "min": 1952, "max": 2007, "step": 5}
    }
  },{
    "name": "View",
    "select": "interval",
    "bind": "scales"
  }],
  "width": 650,
  "height": 400,
  "mark": {
    "type": "circle",
    "opacity": 0.8,
    "stroke": "white",
    "strokeWidth": 1
  },
  "encoding": {
    "x": {
      "field": "gdpPercap",
      "type": "quantitative",
      "axis": {"grid": false},
      "scale": {
        "type": "log",
        "base": 10
      }
    },
    "y": {
      "field": "lifeExp", 
      "type": "quantitative", 
      "axis": {"title": ""}
    },
    "size": {
      "field": "pop"
    },
    "color": {
      "field": "continent"
    }
  }
}

If I add the following tranform block, it doesn't work.

 "transform":[{"filter": {"param": "CurrentYear"}}]

I have already tried the following link : https://vega.github.io/vega-lite/examples/interactive_query_widgets.html

vega vega-lite
1 Answers

It is because you are reading in your year column as strings, and then using a numerical selection to filter. You can see that the year values are strings in the "Data Viewer" tab. Reading in the data like this works with the transform filter you suggested above:

  "data": {
    "url": "https://raw.githubusercontent.com/shre2398/InformationVisualization/main/gapminder.tsv",
    "format": {
      "type": "tsv",
      "parse": {"year": "number"}
    }
  }
user_21668230
Related