Binning axis of heatmap aggregating by maximum in vega-lite

user_367489 0
Viewed 72

I am trying to do a binning operation over one of the axis of a heatmap, and trying to retain the maximum value to the set the colour in that bin.

Consider the following example

{
  "data": {"name": "my_data"},
  "mark": "rect",
  "encoding": {
    "color": {
      "type": "quantitative",
      "field": "z"
    },
    "tooltip": [{"type": "quantitative", "field": "z"},
    {"type": "ordinal", "field": "y"},
    {"type": "ordinal", "field": "x"}],
    "x": {
      "type": "ordinal",
      "field": "x"
    },
    "y": {
      "type": "ordinal",
      "field": "y"
    }
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
  "datasets": {
    "my_data": [
      {"x": 0, "y": 0, "z": 0},
      {"x": 0, "y": 1, "z": 0},
      {"x": 1, "y": 0, "z": 0},
      {"x": 1, "y": 1, "z": 1},
      {"x": 2, "y": 0, "z": 0},
      {"x": 2, "y": 1, "z": 0},
      {"x": 3, "y": 0, "z": 0},
      {"x": 3, "y": 1, "z": 0},
      {"x": 4, "y": 0, "z": 0},
      {"x": 4, "y": 1, "z": 0},
      {"x": 5, "y": 0, "z": 0},
      {"x": 5, "y": 1, "z": 0},
      {"x": 6, "y": 0, "z": 0},
      {"x": 6, "y": 1, "z": 0}]
  }
}

which shows something like:

original

Now, I try to aggregate the x axis by adding {"color": {"aggregate": "max"}} and {"x": {"bin": {"step": 2}}, and I get the following:

binned-2

Now, for other binning values (e.g. "step": 3), the hot-spot disappears:

binned-3

What am I getting wrong?

EDIT: Also, setting the aggregator to mean, still leaves me with the same values (instead of at least showing 0.5 in the first case), while count always returns 1.

EDIT2: While @jakevdp's solution worked for the example above, I still see the same problem when the 1-hot value is set at the boundaries of the bin, for example with:

"my_data": [
      {"x": 0, "y": 0, "z": 1},
      {"x": 0, "y": 1, "z": 0},
      {"x": 1, "y": 0, "z": 0},
      {"x": 1, "y": 1, "z": 0},
      {"x": 2, "y": 0, "z": 0},
      {"x": 2, "y": 1, "z": 0},
      {"x": 3, "y": 0, "z": 0},
      {"x": 3, "y": 1, "z": 0},
      {"x": 4, "y": 0, "z": 0},
      {"x": 4, "y": 1, "z": 0},
      {"x": 5, "y": 0, "z": 0},
      {"x": 5, "y": 1, "z": 0},
      {"x": 6, "y": 0, "z": 0},
      {"x": 6, "y": 1, "z": 0}
]
vega-lite
1 Answers

The issue is that you've declared the x and y fields in the tooltip, so all binnings are grouped by those values. The result is that in each bin you have multiple squares plotted on top of each other, one for each unbinned x value.

The solution is to avoid specifying unbinned fields in the tooltip:

{
  "data": {"name": "my_data"},
  "mark": "rect",
  "encoding": {
    "color": {"type": "quantitative", "field": "z", "aggregate": "max"},
    "tooltip": [{"type": "quantitative", "field": "z"}],
    "x": {"type": "ordinal", "field": "x", "bin": {"step": 3}},
    "y": {"type": "ordinal", "field": "y"}
  },
  "datasets": {
    "my_data": [
      {"x": 0, "y": 0, "z": 0},
      {"x": 0, "y": 1, "z": 0},
      {"x": 1, "y": 0, "z": 0},
      {"x": 1, "y": 1, "z": 1},
      {"x": 2, "y": 0, "z": 0},
      {"x": 2, "y": 1, "z": 0},
      {"x": 3, "y": 0, "z": 0},
      {"x": 3, "y": 1, "z": 0},
      {"x": 4, "y": 0, "z": 0},
      {"x": 4, "y": 1, "z": 0},
      {"x": 5, "y": 0, "z": 0},
      {"x": 5, "y": 1, "z": 0},
      {"x": 6, "y": 0, "z": 0},
      {"x": 6, "y": 1, "z": 0}
    ]
  }
}

enter image description here

user_29378310
Related