How to sync axis domains in vgplot over several plots in a layout

[dlyngman]

Hi!

I have been exploring mosaic over the last month and it has been such a nice experience. For me, coming from a mainly python-centric data science workflow, it truly feels like it unlocks new possibilities in interactive data viz.

As I have been trying to create layouts of several plots I often run into the issue of how to make sure that plots that share axis have the exact same domain. When vgplot handles the aggregation it can be hard to know up front what yDomain to provide for example. Is there any way to tell vgplot that two plots should have the same domain and calculate that based on both plots?

I tried to adapt the pan zoom example but if the domains are not provided explicitly it seems like they can differ in the initial render and snap into place only on first pan/zoom interaction.

Here is an example based on the athletes dataset that shows a histogram of the heights on the bottom and the proportion of females for each bin in the line chart above. The xDomain varies slightly as seen to the right (based on the bin width?) even if they have the same bin transform. I provided explicit yDomains but it would be very nice if these could be calculated by vgplot, is that possible somehow?

Code snippet

import { div, eq, literal, isNull, and } from "npm:@uwdata/mosaic-sql";

export function marginalDistrPlot(vg, table, columns) {

  const $xs = vg.Selection.intersect();
  const $col = vg.Param.value(columns[0]);

  const mainHeight = 350;
  const mainWidth = 1000;
  const propYDomain = [0, 1];
  const countsYDomain = [0, 1000];

  const defaultAttributes = [
    vg.yLabel(null),
    vg.xLabel(null),
    vg.width(mainWidth),
    vg.height(mainHeight),
    vg.grid(true),
    vg.margins({left: 50, right: 10}),
    vg.panZoomX({x: $xs}),
    vg.frame({stroke: "lightgray"}),
  ];

  const nullAttributes = [
    vg.yLabel(null),
    vg.xLabel(null),
    vg.yAxis(null),
    vg.width(70),
    vg.height(mainHeight),
    vg.gridY(true),
    vg.margins({left: 0, right: 50}),
    vg.frame({stroke: "lightgray"}),
  ];

  return vg.vconcat(
    vg.menu({
        label: "Col: ",
        options: columns,
        as: $col
    }),
    vg.hconcat(
      vg.plot(
        vg.lineY(
          vg.from(table),
          {
            x: vg.bin(vg.column($col), {steps: 50}),
            y: div(
              vg.count().where(eq(vg.column("sex"), literal('female'))), 
              vg.count()
            ),
            curve: "catmull-rom",
            stroke: "blue",
            strokeWidth: 2,
            marker: true
          }
        ),
        vg.yDomain(propYDomain),
        ...defaultAttributes,
      ),
      vg.plot(
        vg.tickY(
          vg.from(table),
          {
            x: ["Null"],
            y: div(
              vg.count().where(
                and(
                  eq(vg.column("sex"), literal('female')),
                  isNull(vg.column($col))
                )
              ),
              vg.count().where(isNull(vg.column($col)))
            ),
            stroke: "blue",
            strokeWidth: 2,
          }
        ),
        vg.yDomain(propYDomain),
        ...nullAttributes,
      )
    ),
    vg.hconcat(
      vg.plot(
        vg.rectY(
          vg.from(table),
          {
            x: vg.bin(vg.column($col), {steps: 50}),
            y: vg.count(),
            insetLeft: 0.5,
            insetRight: 0.5,
          }
        ),
        vg.yDomain(countsYDomain),
        ...defaultAttributes
      ),
      vg.plot(
        vg.rectY(
          vg.from(table),
          {
            x: ["Null"],
            y: vg.count().where(isNull(vg.column($col))),
            insetLeft: 5,
            insetRight: 5,
          }
        ),
        vg.yDomain(countsYDomain),
        ...nullAttributes
      )
    )
  )
}

Thanks! /Daniel