title: Slider for chloropeth map Vega-lite
body: <p>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.</p>
  <p>Here is my code so far:</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;https://vega.github.io/schema/vega-lite/v5.json&quot;,
    &quot;width&quot;: 300,
    &quot;height&quot;: 300,
    &quot;data&quot;: {
      &quot;url&quot;: &quot;https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson&quot;,
      &quot;format&quot;: {&quot;type&quot;: &quot;topojson&quot;, &quot;feature&quot;: &quot;europe&quot;}
    },
    &quot;transform&quot;: [
      {
        &quot;lookup&quot;: &quot;properties.NAME&quot;,
        &quot;from&quot;: {
          &quot;data&quot;: {
            &quot;url&quot;: &quot;https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv&quot;
          },
          &quot;key&quot;: &quot;country&quot;,
          &quot;fields&quot;: [&quot;percentage&quot;]
        }
      }
    ],
      &quot;params&quot;: [
      {
        &quot;name&quot;: &quot;year&quot;,
        &quot;value&quot;: 2019,
        &quot;bind&quot;: {
          &quot;input&quot;: &quot;range&quot;,
          &quot;min&quot;: 1985,
          &quot;max&quot;: 2019,
          &quot;step&quot;: 1,
          &quot;name&quot;: &quot;Select the year:&quot;
        }
      }
    ],
    &quot;projection&quot;: {&quot;type&quot;: &quot;naturalEarth1&quot;},
    &quot;mark&quot;: &quot;geoshape&quot;,
    &quot;encoding&quot;: {
      &quot;color&quot;: {
        &quot;field&quot;: &quot;percentage&quot;, 
        &quot;type&quot;: &quot;quantitative&quot;},
      &quot;tooltip&quot;: [
        {&quot;field&quot;: &quot;properties.NAME&quot;,      &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;country&quot;},
        {&quot;field&quot;: &quot;percentage&quot;, &quot;type&quot;: &quot;quantitative&quot;}
      ]
    }
  }
  </code></pre>
  <p>I have been able to do make a bar chart using the same data which updates as I move the slider.The {&quot;filter&quot;: &quot;datum.year==year&quot;} 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 &quot;transform&quot; array in both, with success for my bar chart). Here is the code for my bar chart in case that helps.</p>
  <pre><code>{
      &quot;$schema&quot;: &quot;https://vega.github.io/schema/vega-lite/v5.json&quot;,
  
      &quot;description&quot;: &quot;&quot;,
  
      &quot;title&quot;: {
        &quot;text&quot;: &quot;Thisisatest&quot;,
        &quot;subtitle&quot;:
          &quot;hellohello Source: OurWorldInData&quot;,
        &quot;subtitleFontStyle&quot;: &quot;italic&quot;,
        &quot;subtitleFontSize&quot;: 10,
        &quot;anchor&quot;: &quot;start&quot;,
        &quot;color&quot;: &quot;black&quot;
      },
    
          &quot;data&quot;: {
            &quot;url&quot;: &quot;https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv&quot;
          },   
    
      &quot;height&quot;: 300,
      &quot;width&quot;: 350,
  
    &quot;mark&quot;: {&quot;type&quot;: &quot;bar&quot;, &quot;color&quot;: &quot;skyblue&quot;},
       
      &quot;transform&quot;: [
        {&quot;filter&quot;: &quot;datum.year==year&quot;},
        {&quot;filter&quot;: {
            &quot;field&quot;: &quot;country&quot;,
            &quot;oneOf&quot;: [
              &quot;United Kingdom&quot;, &quot;Spain&quot;, &quot;France&quot;, &quot;Netherlands&quot;, &quot;Portugal&quot;, &quot;Italy&quot;, &quot;Poland&quot;, &quot;Albania&quot;, &quot;Germany&quot;, &quot;Belgium&quot;, &quot;Austria&quot;, &quot;Denmark&quot;]}
        }
    ],
    &quot;params&quot;: [
      {
        &quot;name&quot;: &quot;year&quot;,
        &quot;value&quot;: 2019,
        &quot;bind&quot;: {
          &quot;input&quot;: &quot;range&quot;,
          &quot;min&quot;: 1985,
          &quot;max&quot;: 2019,
          &quot;step&quot;: 1,
          &quot;name&quot;: &quot;Select the year:&quot;
        }
      }
    ],
        &quot;encoding&quot;: {
        &quot;y&quot;: {
          &quot;field&quot;: &quot;percentage&quot;,
          &quot;type&quot;: &quot;quantitative&quot;,
          &quot;title&quot;: &quot;Percentage of low carbon energy&quot;,
          &quot;axis&quot;: {&quot;grid&quot;: false}
        },
        &quot;x&quot;: {
          &quot;field&quot;: &quot;country&quot;,
          &quot;type&quot;: &quot;nominal&quot;,
          &quot;title&quot;: &quot;&quot;,
          &quot;axis&quot;: {&quot;grid&quot;: false, &quot;labelAngle&quot;: 20},
          &quot;sort&quot;: &quot;-y&quot;
        },
        &quot;tooltip&quot;: [
          {&quot;field&quot;: &quot;country&quot;, &quot;title&quot;: &quot;Country&quot;},
          {&quot;field&quot;: &quot;percentage&quot;, &quot;title&quot;: &quot;percentage of low carbon energy&quot;}
        ]
      }
      
  }
  </code></pre>
  <p>What am I am doing wrong? Would appreciate any help! :)</p>
  <p>Thanks</p>