Fixed Aspect Ratio
Some marks must keep a fixed width-to-height ratio — a circular pie needs aspectRatio: 1 no matter what the data encodes. This essay will explain how aspect-ratio locking interacts with data-driven sizing during the layout pass.
Two distinct mechanisms sit nearby and must not be confused — only the first is "aspect ratio":
- Mark-level aspect ratio (
rect/ellipseaspectRatio: number, aw/hratio): locks one mark's box shape, transferring the size-request slope across axes at space-resolution time. Per-mark, the planned subject below. (A graphic-box aspect ratio — fixing the rendered frame's w:h — is the natural future home for the sameaspectRationame; tracked separately.) - Chart-level equal scale (#582) — not aspect ratio: when x and y carry the same unit of measure, their data→pixel scales are equated so one data unit measures the same on both axes — circles stay circular, a 45° line looks 45°. This is not an
aspectRatioknob: it follows from measure equality (field(name, measure)on both axes), the same type rule the circle mark uses. It is the "scale-level coupling" of design: what may set a size (option 3), implemented at the root scope ingofish.tsx(see the layout passes):spaceMeasure(x) === spaceMeasure(y)triggersmin(...)+ centering of the slack axis. It is a single-coordinate-space coupling and does not reach sizes solved in separate nested operator scopes (e.g. a packed unit mosaic).
Planned contents
- The
aspectRatioproperty onrectandellipse. - How layout enforces
w = h * aspectRatiowhile still respecting data encodings. - Where chart templates set
aspectRatio(e.g. circular charts). - Failure modes and edge cases when a ratio conflicts with a size domain.
- How it differs from chart-level equal scale above (box shape, set explicitly, vs. scale equality, derived from a shared measure).
Source
Likely covers:: packages/gofish-graphics/src/ast/shapes/rect.tsx, packages/gofish-graphics/src/ast/shapes/ellipse.tsx. Add the covers: frontmatter when writing this up, then run pnpm --filter docs sync-backlinks.
