Grid within plot.cell

Is there a way to add a grid within a Plot.cell?
This is what i have:


Could I create a grid within this such that it looks like this:

I tried using facets (following the example in the documentation Cell mark | Plot) but i get too many empty facets

Any ideas?

I am no expert, the band scale seems to force rulers into the middle, but then you can hack an offset in pixel coords.

AFAIK there is no hierarchical representation of grouped bands for which those lines make sense, but you can force everything into a specific order and fix the size and then offset the rulers. Maybe ask in the Github Issue search results · GitHub

1 Like

Great! This works for me! Do you also happen to know how to programmatically set dy on tickY?

not in an ideal way, thats why it sucks a bit. You can force the plot to have a certain height in pixel space, so then you can figure out what the offsets should be by dividing by the number of rows (accounting for various other padding and stuff, you can probably figure out a custom formula
), but idiomatic plot is about working in the scale space, and fixed pixel offsets definitely isn’t that. So its all hacking around the fact a grid forces a band scale, and a band scale is centered, but you want a line on the edge of the cell not the center of the cell.

the other thing you could do is draw the line with SVG afterwards, plots exports their scales so you could sample the coordinates of the two cells you want a divider between and average it.

actually the issue we are hitting is this one, so upvote that Position band ticks at the start or end of the band? · Issue #393 · observablehq/plot · GitHub

1 Like

I gave the first suggestion a go yesterday. I’m also using something similar to this, where the rows and the columns dynamically change based on inputs and it was near impossible to figure out a formula to position the lines.

Your second suggestion sounds a lot more promising. The rect element has the exact sizes that I need, but could not find a way to access it or select it to get its height and width. How would I access the scales from a Plot.cell?
Screenshot 2025-02-04 at 10.57.42

Accessing the pixel centers of a band scale example
Community Help / Tom Larkworthy | Observable