javascript - 如何使用 JavaScript 在带有 transform.lookup 的 Vega-Lite Choropleth Map (geoshape) 中聚合颜色编码

Question

我正在尝试使用 JavaScript 在 vega-lite Choropleth 地图中聚合颜色编码。

我制作了一个工作示例，以使其更易于帮助和理解

最小的代码是：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 600,
  "height": 500,
  "mark": "geoshape",
  "data": {
    "url": "https://gist.githubusercontent.com/benooghe/95c8b4d63f67f1856fdd81e6303c654e/raw/8ec1fdd91bfbf4973f97ffb8a5daacb8f431908e/geo_belgium.json",
    "format": {"type": "topojson", "feature": "data"}
  },
  "encoding": {
    "color": {
      "field": "properties.nis_code", 
      "type": "quantitative", 
      // "aggregate":"sum"               // <-- THIS BREAKS THE MAP
    }
  }
}

这是一个简化的版本，它可以工作，但如果你添加, "aggregate: "sum"encoding.color，那么它就不再工作了。

如果我过于简单化，我的完整地图会稍微复杂一点：它有一个transform.lookup.

  let yourVlSpec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "width": 600,
    "height": 500,
    "mark": "geoshape",
    "data": { // TOPOJSON DATA -----
      "url": 'geo_belgium.json',
      "format": {
        "type": "topojson",
        "feature": "data"
      }
    },
    "transform": [{ // LEFT JOIN DATA -----
      "lookup": "properties.nis_code",
      "from": {
        "data": {
          "url": "data.csv"
        },
        "key": "NIS5",
        "fields": ["Cases", "Deaths"]
      }
    }],
    "encoding": {
      "color": {
        "field": "Cases",
        "type": "quantitative",
        // "aggregate": "sum"      // <-- THIS BREAKS THE MAP
      }
    }
  };
  vegaEmbed('#vis', yourVlSpec);

编辑：我也试过这个：在transform

"aggregate": [{"op": "sum", "field": 'Cases', "as": 'sum_cases'}],

EDIT2： data.csv 中的数据如下所示：

Date,PostCode,Cases,Deaths,NIS5
2020-04-08,2470,1,,13036
2020-04-08,2430,1,,13053
2020-04-08,1457,1,,25124
2020-04-08,3212,1,,24066
2020-04-08,2400,1,,13025
2020-04-08,1651,1,,23003
2020-04-08,2360,1,,13031
2020-04-07,1070,22,12,21004
2020-04-07,1070,22,12,21001
2020-04-07,4000,24,11,62093
2020-04-07,4000,24,11,62063
2020-04-01,9320,1,,41002
2020-04-01,7380,1,,53068
2020-04-01,9308,1,,41002
2020-03-31,1070,34,7,21004
2020-03-31,1070,34,7,21001
2020-03-31,3500,7,7,71022
2020-03-31,3800,10,5,71053
2020-03-31,4000,28,4,62063
2020-03-31,4000,28,4,62093

我正在寻找每个“NIS5”的“案例”总和，总结所有日期

标签： javascriptvega-lite

Answer 1

当您将总和表示为编码的一部分时，它会按所有其他编码字段分组。在您的情况下，没有其他编码字段，因此它聚合所有内容并丢弃几何。

解决此问题的一种方法是将相关字段添加到detail编码中，以便聚合不会将它们从数据中删除（vega 编辑器）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 600,
  "height": 500,
  "mark": "geoshape",
  "data": {
    "url": "https://gist.githubusercontent.com/benooghe/95c8b4d63f67f1856fdd81e6303c654e/raw/8ec1fdd91bfbf4973f97ffb8a5daacb8f431908e/geo_belgium.json",
    "format": {"type": "topojson", "feature": "data"}
  },
  "encoding": {
    "color": {"field": "properties.nis_code", "type": "quantitative", "aggregate": "sum"},
    "detail": [{"field": "geometry", "type": "nominal"}, {"field": "properties.id", "type": "nominal"}, {"field": "type", "type": "nominal"}]
  }
}

nis_code但是，在您的情况下，这与原始未聚合图表相同，因为每个地理区域都有一个。

如果您想按几何区域以外的内容进行分组，最好的方法是使用joinaggregate转换（不会删除未命名的字段）并按您有兴趣分组的特定数据进行分组。例如，这是按功能nis_code分组的总和level_2（vega editor）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 600,
  "height": 500,
  "mark": "geoshape",
  "data": {
    "url": "https://gist.githubusercontent.com/benooghe/95c8b4d63f67f1856fdd81e6303c654e/raw/8ec1fdd91bfbf4973f97ffb8a5daacb8f431908e/geo_belgium.json",
    "format": {"type": "topojson", "feature": "data"}
  },
  "transform" : [{
    "joinaggregate": [{"field": "properties.nis_code", "op": "sum", "as": "sum_nis_code"}],
    "groupby": ["properties.level_2"]
  }],
  "encoding": {
    "color": {"field": "sum_nis_code", "type": "quantitative"}
  }
}