two plots combined with the same x-axis and differing y-axis scale?

[MayaGans]

Hi everyone!

I’m attempting to make a chart that’s a simple line plot on top of a heatmap that share the same x-axis. This simple enough to do as two separate plots using Plot but I’m not sure how to (1) best structure the data to (2) have a single plot with a y-axis that’s partially continuous and partially categorical - is this possible??

Current code

Plot.plot({
  marginLeft: 120,
  padding: 0,
  y: {
    label: null,
    scale: yScaleCombined,
  },
  x: {
    label: 'Week'
  },
  marks: [
    Plot.lineY(data, {
       ....
    }),
    Plot.cell(
      ....
    ),
  ],
});

You’ll see in the notebook the y-axis is not in numerical order ascending upwards as would a normal numeric plot’s y-axis with 0 at the origin and ascending numbers, it'd be cool to be able to specify a y-axis for each mark maybe??

Pseudo-code

Plot.plot({
  marginLeft: 120,
  padding: 0,
  y: {
    label: null,
    scale: yScaleCombined,
  },
  x: {
    label: 'Week'
  },
  marks: [
    Plot.lineY(data, {
       y: scaleLinear
    }),
    Plot.cell(
      {
        y: scaleBand
        }
    ),
  ],
});

Any thoughts or help appreciated!!!

https://observablehq.com/d/650bd4ef81ea8b9f

[Fil]

You could combine two plots sharing the same x scale:

{
  const topPlot = Plot.plot({
    marginLeft: 120,
    x: { axis: null, type:"band" },
    marks: [Plot.lineY(data, { x: "week", y: "aval", z: "param" })]
  });

  const bottomPlot = Plot.plot({
    marginLeft: 120,
    x: topPlot.scale("x"), // reuses the same x scale
    marks: [
      Plot.cellX(time, {x: "week", y: "param", fill: "aval"})
    ]
  });

  return html`${topPlot}${bottomPlot}`;
}