@mcmcclur thx a lot for taking the time to look into it. This has helped me narrow down the issue further. Much appreciated.
Indeed it is the legend which disaligns the zoom, more precisely the wrapper figure
element generated by plot() if there is a title
, subtitle
, legend
, caption
option (Cf. Plots | Observable Plot). d3.zoom in general (for lack a better understanding) does always not behave as expected in cases where there is more than a single child element to the div on which it is called.
I followed your advice and manage the legend separately, and updated the notebook and standalone page.
Now all works fine. It is still puzzling to me that stacking elements vertically ends up misaligning the zoom horizontally (!) but never mind.
EDIT:
A disciplined way to make sure only the chart is rendered is to use option figure=false. It will overrides title, subtitle, caption, legend.