分区统计图Vega-Lite的滑块

Slider for choropleth map Vega-Lite

提问人:Clara_code 提问时间:9/21/2023 更新时间:9/21/2023 访问量:38

问:

我想在Vega-Lite中为我的分区统计图制作一个滑块(随着时间的推移)。我已经制作了滑块和分区统计图,但它们没有正确连接。分区统计图似乎总是显示 2021 年的数据,而不是根据滑块上的年份进行更改。任何建议都是值得赞赏的 - 提前致谢!

我的代码可以在下面看到。

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "width": 800,
    "height": 400,
    "data": {
      "url": "https://raw.githubusercontent.com/clarachristiansen/FIT_3179_DV2/main/Map_Combined_Worldwide.json",
      "format": {"type": "topojson", "feature": "ne_110m_admin_0_countries"}
    },
    "transform": [
      {
        "lookup": "properties.NAME",
        "from": {
          "data": {
            "url": "https://raw.githubusercontent.com/clarachristiansen/FIT_3179_DV2/main/Emissions_by_Country_percapita.csv"
          },
          "key": "Country",
          "fields": ["Total", "Year"]
        },
        "as": ["Emission", "Year"]
      },
      {"filter": {"param": "year"}}
    ],
    "params": [
      {
        "name": "year",
        "value": 2000,
        "bind": {
          "input": "range",
          "min": 2000,
          "max": 2020,
          "step": 1,
          "name": "Select the year:"
        }
      }
    ],
    "projection": {"type": "equalEarth"},
    "mark": {"type": "geoshape"},
    "encoding": {
      "color": {
        "field": "Emission",
        "type": "quantitative",
        "scale": {"type": "linear"}
      },
      "tooltip": [
        {"field": "properties.NAME", "type": "nominal", "title": "Country"},
        {"field": "Emission", "type": "quantitative", "title": "Emission per Capita"}
      ]
    }
  }

我还尝试了过滤器定义和“解析”的不同变体,但我是一个完全的初学者,所以我不知道要寻找什么。我试图以与这里相同的方式实现它: 叶绿素地图Vega-lite的滑块,但这不起作用:

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "width": 300,
    "height": 300,
    "data": {
      "url": "https://raw.githubusercontent.com/clarachristiansen/FIT_3179_DV2/main/Emissions_by_Country_percapita.csv"
    },
    "transform": [
      {
        "lookup": "Country",
        "from": {
          "data": {
            "url": "https://raw.githubusercontent.com/clarachristiansen/FIT_3179_DV2/main/Map_Combined_Worldwide.json",
            "format": {"type": "topojson", "feature": "ne_110m_admin_0_countries"}
          },
          "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": "equalEarth"},
    "mark": "geoshape",
    "encoding": {
      "color": {"field": "Total", "type": "quantitative"},
      "tooltip": [
        {"field": "properties.NAME", "type": "nominal", "title": "country"},
        {"field": "Total", "type": "quantitative"}
      ]
    }
  }
滑块 Vega-Lite Choropleth

评论


答: 暂无答案