Need help with d3 brush misalignment in OJS cell

[Hedyosmos]

Description

I'm trying to recreate the last plot with brush interaction from this example from observable framework
https://observablehq.observablehq.cloud/framework-example-mortgage-rates/

During drag and resize actions, the brush appears slightly to the right of the actual pointer position.
I suspect this is because the pointer coordinates don’t account for the left margin, since switching to custom page layout reduced the misalignment and brought the brush closer to the mouse

---
title: Example
format: html
echo: false
---

```{ojs}
raw = FileAttachment("PMMS_history.csv").csv({typed: true})
pmms = raw.map(d => (d.date = new Date(d.date), d))
tidy = pmms.flatMap(({date, pmms30, pmms15}) => [{date, rate: pmms30, type: "30Y FRM"}, {date, rate: pmms15, type: "15Y FRM"}])
color = Plot.scale({color: {domain: ["30Y FRM", "15Y FRM"]}})
defaultStartEnd = [pmms.at(-53).date, pmms.at(-1).date]
mutable startEnd = defaultStartEnd
setStartEnd = (se) => mutable startEnd = (se ?? defaultStartEnd)
```

```{ojs}
Plot.plot({
    width,
    y: {grid: true, label: "rate (%)"},
    color,
    marks: [
        Plot.ruleY([0]),
        Plot.lineY(tidy, {x: "date", y: "rate", stroke: "type", tip: true}),
        (index, scales, channels, dimensions, context) => {
        const x1 = dimensions.marginLeft;
        const y1 = 0;
        const x2 = dimensions.width - dimensions.marginRight;
        const y2 = dimensions.height;
        const brushed = (event) => {
            if (!event.sourceEvent) return;
            let {selection} = event;
            if (!selection) {
            const r = 10;
            let [px] = d3.pointer(event, context.ownerSVGElement);
            px = Math.max(x1 + r, Math.min(x2 - r, px));
            selection = [px - r, px + r];
            g.call(brush.move, selection);
            }
            setStartEnd(selection.map(scales.x.invert));
        };
        const pointerdowned = (event) => {
            const pointerleave = new PointerEvent("pointerleave", {bubbles: true, pointerType: "mouse"});
            event.target.dispatchEvent(pointerleave);
        };
        const brush = d3.brushX().extent([[x1, y1], [x2, y2]]).on("brush end", brushed);
        const g = d3.create("svg:g").call(brush);
        g.call(brush.move, startEnd.map(scales.x));
        g.on("pointerdown", pointerdowned);
        return g.node();
        }
    ]
})
```

https://www.freddiemac.com/pmms/docs/PMMS_history.csv

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

This being said, your question seems to be only about Observable code so I'm not sure this repository is the best place to ask this kind of technical question regarding Observable.js.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[Hedyosmos]

I updated the first post for the minimal example, can you pls recheck