Слайдер для карты хлоропетов Vega-lite

Question

Я пытаюсь добавить ползунок для своей хлоропетовой карты Европы в Vega-lite, чтобы фильтровать данные по годам. В настоящее время у меня есть карта, на которой просто показаны данные за 2019 год (с цветовой кодировкой), и я пытаюсь сделать слайдер, чтобы я мог менять годы и видеть, как менялись цвета с течением времени.

Вот мой код:

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

Мне удалось создать гистограмму, используя те же данные, которые обновляются при перемещении ползунка. {"Filter": "datum.year == year"} - вот что позволяет моей гистограмме делать это, однако это не работает на моей карте хлоропетов (я попытался добавить это в массив "преобразований" в обоих, с успехом для моей гистограммы). Вот код моей гистограммы на случай, если это поможет.

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

Что я делаю не так? Буду признателен за любую помощь! :)

Спасибо

Answer 1

Это было почти правильно, но в вашем lookupпреобразование, вам нужно предоставить поля, которые вам потребуются в ваших окончательных данных, например yearполе. Поскольку не было поля года, filterтрансформация не работала.

Ниже приведен модифицированный конфиг или реферальный редактор :

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

Редактировать

Я инвертировал основные данные и данные поиска, которые, кажется, принесли все годы для ваших стран. Дайте мне знать, если это работает.