Limiting the number of marks after using groupX

[spandl]

I am wondering if it is possible to limit the number of bars in a bar chart after using groupX.

Because the dataset needs to be reduced first, I'm not sure where to slice the array.

in x d=> {} the items are not in order
when using render() the positions are already set and slicing the array removes bars, but doesn't affect the layout.

The solution I would know, is grouping the data first and then just use the bar marks without the groupX, but the goal of my exercise is to use as many transformations as possible with Plot.

An additional requirement would be to combine the remaining values and group to an "others" bar.
This bar should then remain at the bottom of bar chart, even if the total x-value would be greater then other bars. So, this group should be applied after the sorting.

This is the example I am starting with:

const barChart = Plot.plot({
  marginLeft: 400,
  width: 900,
  height: 300,
  padding: 0.1,
  x: {
    axis: null,
  },
  y: {
    padding: 0.15,
    label: null,
  },
  marks: [
    Plot.barX(
      eventDataCompare,
      Plot.groupY(
        {
          x: (d) => {
            const total = d3.sum(d, (i) => i.record_count);
            return total;
          },
        },
        {
          y: "page_title",
          sort: { y: "-x" },
          limit: 5,
          fill: "#3FA0B1",
        }
      )
    ),
    Plot.ruleX([0]),
    Plot.axisY({
      fontSize: 16,
      tickSize: 0,
    }),
  ],
});

[spandl]

I found the property limit!

That solves already issue # 1 - limiting bars:

         sort: {
            y: "-x",
            limit: 5,
          },

Still digging to find out how to aggregate the remaining bars.
A solution could be to create a separate mark ... ?!

Note: limit isn't part of the Plot documentation. At least not in the sort page and the API index

[Fil]

Yes, the four following options (documented in https://observablehq.com/plot/features/scales) are missing from the API index: reduce, order, reverse and limit.
#2294

(Edit: we just added them)

I don't have an obvious answer to aggregate the remaining bars 🤔

[spandl]

Thanks, @Fil

I will see if I find a solution to part II, otherwise, I guess that the smartest way would be to prep the data, before passing it to Plot.

[Fil]

Solving part 2 within Plot is hard (a chicken and egg problem). Here's my solution for now
https://observablehq.com/@observablehq/plot-group-top-n-with-others

[spandl]

UUh. This is nice.

And there are many details in it as well, such as the texture of the last bar, the additional info in the tooltip, as well as the label of the y-axis.

I would say, this answers my challenge 110%.

🚀 🙏🏻