Custom sort order for stacked bar chart

[spandl]

A horizontal stacked bar chart has two sort directions:

• The vertical y direction
• The x direction for segments

I'm trying to sort the segments by a custom order (the same that is applied to the legend)
https://observablehq.com/@spandl/sort-order-test

Can I do this with Plot, or do I need to sort the dataset?
I'm sure there is only a tiny piece that I can't figure out...

Thanks.

[mbostock]

Can you make the notebook public so we can see? Thanks.

[spandl]

Done, sorry!

[mbostock]

You want to use the order option to the stack transform (rather than the sort option). If you want to sort the segments in ascending order based on the z channel (which defaults to fill), that’s:

Plot.plot({
  marginLeft: 400,
  color: {
    domain: ["1", "2", "3", "4", "5"],
    range: ["grey", "orange", "red", "pink", "black"],
    legend: true
  },
  marks: [
    Plot.barX(dataset, {
      y: data.accessors.y,
      x: data.accessors.x,
      fill: data.accessors.z,
      order: "z",
      sort: {
        y: "-x"
      }
    })
  ]
})

If you want to specify a different order of z values, then you could specify the order option as a list of values in the desired order, e.g., ["1", "2", "3", "4", "5"]. There isn’t currently a way to say that the z values should be sorted according to the color scale’s domain, but that might be a nice feature… maybe order: "color"?

[spandl]

Oh, yes, "order"! And on top, I'm using this somewhere else!

Small follow up question: How would you explain to a newbee the difference between "order" and "sort"? 😎
Order applies for the stack transform and sort for scales?

🙏🏻!

[mbostock]

The sort option is documented here: https://observablehq.com/plot/features/scales#sort-mark-option