Multiple facets on same axis

[royfrancis]

My understanding is that when facetting, one variable can be provided along the x axis (fx: "bla") and one along the y axis (fy: "bla"). But what if I have more variables to facet? Is it possible to have more than one variable on the same axis? ie; (fx: ["bla1", "bla2"])

As an example, I would like to facet by color and clarity. I am mapping color to x facet and clarity to y facet. This is fine, but there are multiple y axes and I would like to have one y-axis to make comparison easier. Also, what if we have more than two variables to facet?

Code

filteredDiamonds = diamonds.filter(d => 
  (d.color === 'D' || d.color === 'E' || d.color === 'F') &&
  (d.clarity === 'I1' || d.clarity === 'IF' || d.clarity === 'SI1')
)

Plot.plot({
  title: "Boxplot",
  marks: [
    Plot.boxY(filteredDiamonds, {
      x: "cut",
      y: "depth",
      fx: "color",
      fy: "clarity"
    }),
    Plot.axisX({tickRotate: -45})
  ],
  grid: true
})

One solution is to create new variables by concatenating them and then using that to facet.

Code

filteredDiamonds1 = filteredDiamonds.map(d => ({
...d,
clarity_color: ${d.clarity} ${d.color}
}));

Plot.plot({
title: "Boxplot",
marks: [
Plot.boxY(filteredDiamonds1, {
x: "cut",
y: "depth",
fx: "clarity_color"
}),
Plot.axisX({tickRotate: -45})
],
grid: true
})

This is not a great solution because it's messy and we lose the grouping. I am thinking of something like this where the grouping is maintained:

A working document for this issue: https://observablehq.com/d/5e28dce4416bb6c6

[Fil]

Here's an approach to nested facets:
https://observablehq.com/@observablehq/plot-nested-facets