Vegalite= Interactive line: data selector

Question

I'm trying to add a slider that allows you to change the range of dates (see chart screenshot).

Original code of the basic graph:

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": {
    "text": "Share of Total Net Worth Held by the Top 1%",
    "subtitle": "Source: Board of Governors of the Federal Reserve System (US)",
    "subtitleFontStyle": "italic",
    "subtitleFontSize": 10,
    "anchor": "start",
    "color": "black"
  },
  "data": {
    "url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/data_FRED-WFRBST01134.json",
    "format": {"type": "json", "property": "observations"}
  },
  "height": 300,
  "width": 310,
  "mark": "line",
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "title": null,
      "axis": {"grid": false}
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "title": null,
      "axis": {"grid": true}
    }
  }
} 

I am basing it on another chart I found but I can't seem to get it to work

Code of chart I'm trying to emulate:

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


    "title": {
    "text": "Inflation - since 1800",
    "subtitle": "RPI: long series: annual percentage change ",
    "subtitleFontStyle":"italic",
    "subtitleFontSize":10,
    "anchor": "start",
    "color": "black"
  },


    "width":300,
    "height":300,

    "data": {
        "name":"myData",
        "url": "https://raw.githubusercontent.com/RDeconomist/RDeconomist.github.io/main/charts/ONSinflation/data_MM23-CDSI.json",
        "format": {
          "type":"json",
          "property": "years"
        }},
  

    "mark":{
      "type": "line",
      "color":"#00BFFF",
      "strokeWidth":2,
      "opacity":1
    },

    "transform": [
      {"filter": "datum.year>minYear"},
      {"filter": "datum.year<maxYear"}
    ],

    "params": [    
      {"name":"minYear", "value":1800,
         "bind":{
           "input": "range",
           "min": 1800, 
           "max": 2021, 
           "step": 1,
           "name": "Start year:"}
      },

      {"name":"maxYear", "value":2021,
         "bind":{
           "input": "range",
           "min": 1800, 
           "max": 2021, 
           "step": 1,
           "name": "End year:"}
      }
    ],


    "encoding": {
      
      "x": {
        "field": "date",
        "type": "temporal",
        "title":null
        },
  
      "y": {
        "field": "value",                
        "type": "quantitative",
        "title":null,
        "scale":{
          "domain":{
            "data": "myData", 
            "field": "value"}}
        }
  }
}

I managed to get Vega to create another column that has just the years but for some reason, the data just still isn't appearing

Code that gives what's shown in the screenshot

{
 "$schema": "https://vega.github.io/schema/vega/v5.json",
 "autosize": {"type": "fit-x", "contains": "padding"},
 "background": "#FFFFFF",
 "padding": 5,
 "height": 310,
 "title": {
   "text": "Share of Total Net Worth Held by the Top 1%",
   "subtitle": "Source: Board of Governors of the Federal Reserve System (US)",
   "subtitleFontStyle": "italic",
   "subtitleFontSize": 10,
   "anchor": "start",
   "color": "black",
   "subtitleColor": "black"
 },
 "style": "cell",
 
 "data": [
   {
   "name":"myData",
   "url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/data_FRED-WFRBST01134.json",
   "format": {"type": "json", "property": "observations"},
     
     "transform": [
       {"type": "formula", "expr": "year(datum.date)", "as": "year"},
       {"type": "filter", "expr": "datum.year>=minYear"},
       {"type": "filter", "expr": "datum.year<=maxYear"}
     ]
   }
 ],
 "signals": [
   {
     "name": "width",
     "init": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
     "on": [
       {
         "update": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
         "events": "window:resize"
       }
     ]
   },
   {
     "name": "minYear",
     "value": 1989,
     "bind": {
       "input": "range",
       "min": 1989,
       "max": 2021,
       "step": 1,
       "name": "Start year: "
     }
   },
   {
     "name": "maxYear",
     "value": 2021,
     "bind": {
       "input": "range",
       "min": 1989,
       "max": 2021,
       "step": 1,
       "name": "End year: "
     }
   }
 ],

 "mark": "line",
 "encoding": {
   "x": {
     "field": "year",
     "type": "temporal",
     "title": null,
     "axis": {"grid": false}
   },
   "y": {
     "field": "value",
     "type": "quantitative",
     "title": null,
     "axis": {"grid": true},
     "scale":{
         "domain":{
           "data": "myData", 
           "field": "value"}}
   }
 }
}

 

I could really use some help, have spent hours trying to figure it out. I would be eternally grateful

Answer 1

There seems to be some configuration issue as the signal from vega and params from vega-lite was mixed. I have made your configuration same as the one working with slider params.

Below is the Config or refer editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "autosize": {"type": "fit-x", "contains": "padding"},
  "background": "#FFFFFF",
  "padding": 5,
  "height": 310,
  "width": "container",
  "title": {
    "text": "Share of Total Net Worth Held by the Top 1%",
    "subtitle": "Source: Board of Governors of the Federal Reserve System (US)",
    "subtitleFontStyle": "italic",
    "subtitleFontSize": 10,
    "anchor": "start",
    "color": "black",
    "subtitleColor": "black"
  },
  "style": "cell",
  "data": {
    "name": "myData",
    "url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/data_FRED-WFRBST01134.json",
    "format": {"type": "json", "property": "observations"}
  },
  "mark": {"type": "line", "color": "#00BFFF", "strokeWidth": 2, "opacity": 1},
  "transform": [
    {"calculate": "year(datum.date)", "as": "year"},
    {"filter": "datum.year>minYear"},
    {"filter": "datum.year<maxYear"}
  ],
  "params": [
    {
      "name": "minYear",
      "value": 1989,
      "bind": {
        "input": "range",
        "min": 1989,
        "max": 2021,
        "step": 1,
        "name": "Start year: "
      }
    },
    {
      "name": "maxYear",
      "value": 2021,
      "bind": {
        "input": "range",
        "min": 1989,
        "max": 2021,
        "step": 1,
        "name": "End year: "
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "title": null,
      "axis": {"grid": false}
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "title": null,
      "axis": {"grid": true},
      "scale": {"domain": {"data": "myData", "field": "value"}}
    }
  }
}