# Grid within plot.cell

**URL:** <https://talk.observablehq.com/t/grid-within-plot-cell/10215>\
**Category:** Help\
**Created:** [January 30, 2025, 5:03pm UTC](https://talk.observablehq.com/t/grid-within-plot-cell/10215 "2025-01-30T17:03:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dh810](https://avatars.discourse-cdn.com/v4/letter/d/59ef9b/32.png) [@dh810](https://talk.observablehq.com/u/dh810)\
**Post date:** [January 30, 2025, 5:03pm UTC](https://talk.observablehq.com/t/grid-within-plot-cell/10215/1 "2025-01-30T17:03:26Z")

</div>

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

 ![Screenshot 2025-01-30 at 16.34.55](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/42d97760d170c1a4d64c609d503e725da30fb8db.png)  
Could I create a grid within this such that it looks like this:  
 ![Screenshot 2025-01-30 at 16.37.06](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/1/180935e09c769b8d208a02eeb0a33963873e6e43.png)

I tried using facets (following the example in the documentation [Cell mark | Plot](https://observablehq.com/plot/marks/cell)) but i get too many empty facets

 ![Screenshot 2025-01-30 at 16.47.32](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/8caf04bfd2a65eabea556abe83b553c13f8f3983.png)

Any ideas?

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [February 1, 2025, 8:07pm UTC](https://talk.observablehq.com/t/grid-within-plot-cell/10215/2 "2025-02-01T20:07:49Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/c/cf8482db0e6b05dff8e0f300417fc392b8963e03.png)

> **[Community Help](https://observablehq.com/@tomlarkworthy/community-help#cell-563)**
>
> Basic code editor Code mirror editor Autocomplete on arrays Reactively update content within the same cell? you can manually use addEventListener to wire up reactivity as shown below @tomlarkworthy/view also has \`bindOneWay\` with a similar exampkle...

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](https://github.com/search?q=repo%3Aobservablehq%2Fplot+heirarchical+data&type=issues)

---

<div class="post-metadata">

**Author:** ![dh810](https://avatars.discourse-cdn.com/v4/letter/d/59ef9b/32.png) [@dh810](https://talk.observablehq.com/u/dh810)\
**Post date:** [February 3, 2025, 12:03pm UTC](https://talk.observablehq.com/t/grid-within-plot-cell/10215/3 "2025-02-03T12:03:45Z")

</div>

> [@tomlarkworthy](#):
>
> Issue search results · GitHub

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

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [February 3, 2025, 9:17pm UTC](https://talk.observablehq.com/t/grid-within-plot-cell/10215/4 "2025-02-03T21:17:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [February 3, 2025, 9:20pm UTC](https://talk.observablehq.com/t/grid-within-plot-cell/10215/5 "2025-02-03T21:20:45Z")

</div>

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](https://github.com/observablehq/plot/issues/393)

---

<div class="post-metadata">

**Author:** ![dh810](https://avatars.discourse-cdn.com/v4/letter/d/59ef9b/32.png) [@dh810](https://talk.observablehq.com/u/dh810)\
**Post date:** [February 4, 2025, 11:05am UTC](https://talk.observablehq.com/t/grid-within-plot-cell/10215/6 "2025-02-04T11:05:47Z")

</div>

I gave the first suggestion a go yesterday. I’m also using something similar to [this](https://observablehq.com/@observablehq/plot-correlation-heatmap), 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](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/1/18850c5a2ca22b4d0490c7e77abd059b65ba72b2.png)

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [February 4, 2025, 12:18pm UTC](https://talk.observablehq.com/t/grid-within-plot-cell/10215/7 "2025-02-04T12:18:05Z")

</div>

Accessing the pixel centers of a band scale example  
[Community Help / Tom Larkworthy | Observable](https://observablehq.com/@tomlarkworthy/community-help#cell-601)
