检索 binned vega (lite) 直方图的基础值？

Question

如何检索和显示用于计算 vega 直方图中分箱柱最高点的值？

在这个 d3 observable notebook 中，我说明了想要实现的目标...单击柱时，我使用柱的基础值更新 selected_text 变量，这些值被计算为柱的最高价.

处理 fold 转换，但在我的例子中，我正在寻找 flatten transform 的逆转换。

这是我正在寻找的数据转换的图示。来自：

[
    {"name": "alpha", "data": 123, "bin0": 1, "bin1": 2},
    {"name": "alpha", "data": 789, "bin0": 2, "bin1": 3},
    {"name": "beta",  "data": 456, "bin0": 2, "bin1": 3},
    {"name": "beta",  "data": 789, "bin0": 3, "bin1": 4},
    {"name": "beta",  "data": 0AB, "bin0": 3, "bin1": 4}
]

到

[
    "bin0": 1, "bin1": 2, values: [{"name": "alpha", "data": 123}]
    "bin0": 2, "bin1": 3, values: [{"name": "alpha", "data": 789},
                   {"name": "beta", "data": 456}]
    "bin0": 3, "bin1": 4, values: [{"name": "beta", "data": 789},
                   {"name": "beta", "data": 0AB}]
]

我认为如果 concat 表达式可用于 aggregation transforms 的 groupby operator 则可以实现，但事实并非如此。

Answer 1

"unflatten" 转换可以使用 values 聚合的聚合转换大致实现：

{
  "data": {
    "values": [
      {"name": "alpha", "data": 123, "bin0": 1, "bin1": 2},
      {"name": "alpha", "data": 789, "bin0": 2, "bin1": 3},
      {"name": "beta", "data": 456, "bin0": 2, "bin1": 3},
      {"name": "beta", "data": 789, "bin0": 3, "bin1": 4},
      {"name": "beta", "data": 789, "bin0": 3, "bin1": 4}
    ]
  },
  "transform": [
    {
      "aggregate": [{"op": "values", "as": "values"}],
      "groupby": ["bin0", "bin1"]
    }
  ],
  "mark": "point"
}

在Vega Editor的数据查看器中可以看到转换后的数据为：

[
  {"bin0": 1, "bin1": 2,
   "values": [{"name": "alpha", "data": 123, "bin0": 1, "bin1": 2}]},
  {"bin0": 2, "bin1": 3,
   "values": [{"name": "alpha", "data": 789, "bin0": 2, "bin1": 3},
              {"name": "beta", "data": 456, "bin0": 2, "bin1": 3}]},
  {"bin0": 3, "bin1": 4,
   "values": [{"name": "beta", "data": 789, "bin0": 3, "bin1": 4},
              {"name": "beta", "data": 0AB, "bin0": 3, "bin1": 4}]}
]

Answer 2

鉴于 Jake 的回答，这里是 complete example 在 Vega 中我的目标。

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A histogram of film ratings, modified to include null values.",
  "width": 400,
  "height": 200,
  "padding": 5,
  "autosize": {"type": "fit", "resize": true},
  "signals": [
    {"name": "binCount", "update": "(bins.stop - bins.start) / bins.step"},
    {"name": "barStep", "update": "(width ) / (1 + binCount)"},
            {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "slice(datum.dlist,0,2)"},
        {"events": "rect:mouseout",  "update": "{}"}
      ]
    }
  ],
  "data": [
    {
      "name": "table",
      "values": [
        {"name": "alpha", "data": "123"},
        {"name": "alpha", "data": "789"},
        {"name": "beta", "data": "456"},
        {"name": "beta", "data": "789"},
        {"name": "gamma", "data": "789"},
        {"name": "beta", "data": "300"}
      ],
      "transform": [
        {"type": "extent", "field": "data", "signal": "extent"},
        {
          "type": "bin",
          "signal": "bins",
          "field": "data",
          "extent": {"signal": "extent"},
          "maxbins": 4
        }
      ]
    },
      {
      "name": "aggregat",
      "source": "table",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["bin0", "bin1"],
          "ops": ["values"],
          "fields": ["undefined"],
          "as": ["values"]
        }

      ]
    },
    {
      "name": "counts",
      "source": "table",
      "transform": [{"type": "aggregate", "groupby": ["bin0", "bin1"]},
       {
          "type": "lookup",
          "from": "aggregat",
          "key": "bin0",
          "fields": ["bin0"],
          "values": ["values"],
          "as": ["dlist"]
        }]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "round": true,
      "nice": true,
      "domain": {"fields": [{"data": "counts", "field": "count"}]}
    },
    {
      "name": "xscale",
      "type": "linear",
      "range": [{"signal": "barStep "}, {"signal": "width"}],
      "round": true,
      "domain": {"signal": "[bins.start, bins.stop]"},
      "bins": {"signal": "bins"}
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "xscale", "tickMinStep": 0.5},
    {"orient": "left", "scale": "yscale", "tickCount": 5, "offset": 5}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "counts"},
      "encode": {
        "update": {
                    "tooltip" : { "signal": "tooltip"},
          "x": {"scale": "xscale", "field": "bin0", "offset": 1},
          "x2": {"scale": "xscale", "field": "bin1"},
          "y": {"scale": "yscale", "field": "count"},
          "y2": {"scale": "yscale", "value": 0},
          "fill": {"value": "steelblue"}
        },
        "hover": {"fill": {"value": "firebrick"}}
      }
    }
  ]
}

检索 binned vega (lite) 直方图的基础值？

Retrieve underlying values of a binned vega (lite) histogram?

d3.js

visualization

vega

vega-lite

altair