Vegalite= 交互行：数据选择器

Question

我正在尝试添加一个允许您更改日期范围的滑块（参见图表屏幕截图）。

基础图原代码：

  "$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}
    }
  }
}

我将它建立在我找到的另一张图表上，但我似乎无法让它发挥作用

我要模拟的图表代码：

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

我设法让 Vega 创建了另一个只有年份的列，但由于某种原因，数据仍然没有出现

提供屏幕截图中显示内容的代码

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

我真的需要一些帮助，花了几个小时试图弄明白。我将永远感激

Answer 1

似乎存在一些配置问题，因为来自 vega 的信号和来自 vega-lite 的参数混合在一起。我已经使您的配置与使用滑块参数的配置相同。

以下为配置或参考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"}}
    }
  }
}

Vegalite= 交互行：数据选择器

Vegalite= Interactive line: data selector

charts

vega-lite