Slider for chloropeth map Vega-lite

Question

I am trying to add a slider for my chloropeth map of Europe in vega-lite, to filter the data by year. I currently have a map which just shows data from 2019 (colour coded), and I am trying to make a slider so I can change years and see how the colours have changed over time.

Here is my code so far:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 300,
  "data": {
    "url": "https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson",
    "format": {"type": "topojson", "feature": "europe"}
  },
  "transform": [
    {
      "lookup": "properties.NAME",
      "from": {
        "data": {
          "url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
        },
        "key": "country",
        "fields": ["percentage"]
      }
    }
  ],
    "params": [
    {
      "name": "year",
      "value": 2019,
      "bind": {
        "input": "range",
        "min": 1985,
        "max": 2019,
        "step": 1,
        "name": "Select the year:"
      }
    }
  ],
  "projection": {"type": "naturalEarth1"},
  "mark": "geoshape",
  "encoding": {
    "color": {
      "field": "percentage", 
      "type": "quantitative"},
    "tooltip": [
      {"field": "properties.NAME",      "type": "nominal", "title": "country"},
      {"field": "percentage", "type": "quantitative"}
    ]
  }
}

I have been able to do make a bar chart using the same data which updates as I move the slider.The {"filter": "datum.year==year"} is what makes my bar chart able to do this, however it does not work on my chloropeth map (I have tried to add this within the "transform" array in both, with success for my bar chart). Here is the code for my bar chart in case that helps.

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

    "description": "",

    "title": {
      "text": "Thisisatest",
      "subtitle":
        "hellohello Source: OurWorldInData",
      "subtitleFontStyle": "italic",
      "subtitleFontSize": 10,
      "anchor": "start",
      "color": "black"
    },
  
        "data": {
          "url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
        },   
  
    "height": 300,
    "width": 350,

  "mark": {"type": "bar", "color": "skyblue"},
     
    "transform": [
      {"filter": "datum.year==year"},
      {"filter": {
          "field": "country",
          "oneOf": [
            "United Kingdom", "Spain", "France", "Netherlands", "Portugal", "Italy", "Poland", "Albania", "Germany", "Belgium", "Austria", "Denmark"]}
      }
  ],
  "params": [
    {
      "name": "year",
      "value": 2019,
      "bind": {
        "input": "range",
        "min": 1985,
        "max": 2019,
        "step": 1,
        "name": "Select the year:"
      }
    }
  ],
      "encoding": {
      "y": {
        "field": "percentage",
        "type": "quantitative",
        "title": "Percentage of low carbon energy",
        "axis": {"grid": false}
      },
      "x": {
        "field": "country",
        "type": "nominal",
        "title": "",
        "axis": {"grid": false, "labelAngle": 20},
        "sort": "-y"
      },
      "tooltip": [
        {"field": "country", "title": "Country"},
        {"field": "percentage", "title": "percentage of low carbon energy"}
      ]
    }
    
}

What am I am doing wrong? Would appreciate any help! :)

Thanks

Answer 1

It was almost correct but in your lookup transform you need to provide the fields which you are going to be required in your final data like year field. Since there was no year field the filter transform was not working.

Below is the modified config or refer editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 300,
  "data": {
    "url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
  },
  "transform": [
    {
      "lookup": "country",
      "from": {
        "data": {
          "url": "https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson",
          "format": {"type": "topojson", "feature": "europe"}
        },
        "key": "properties.NAME",
        "fields": ["properties", "type", "geometry"]
      }
    },
    {"filter": "datum.year==year"}
  ],
  "params": [
    {
      "name": "year",
      "value": 2019,
      "bind": {
        "input": "range",
        "min": 1985,
        "max": 2030,
        "step": 1,
        "name": "Select the year:"
      }
    }
  ],
  "projection": {"type": "naturalEarth1"},
  "mark": "geoshape",
  "encoding": {
    "color": {"field": "percentage", "type": "quantitative"},
    "tooltip": [
      {"field": "properties.NAME", "type": "nominal", "title": "country"},
      {"field": "percentage", "type": "quantitative"}
    ]
  }
}

Edit

I have inverted the main data and lookup data, which seems to bring all the years for your countries. Let me know if this works.