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

Question

How can you retrieve and display the values used to compute the high of binned bars in a vega histogram?

In this d3 observable notebook I illustrate what want to achieve... When a bar is clicked, I update the selected_text variable with the bar's underlying values which were counted to give the bar's high.

The related question deals with the fold transform but in my case, I am looking for the inverse of the flatten transform.

Here is an illustration of the data transformation I am looking for. Going from:

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

to

[
    "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}]
]

I think this could be achieved if the concat expression was available to the groupby operator of the aggregation transforms, but it is not.

Answer 1

The "unflatten" transform can be roughly achieved using an aggregate transform with the values aggregate:

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

In the data viewer of the Vega Editor, you can see that the transformed data are:

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