Panning and zooming

[mbostock]

It would be nice to support pan-and-zoom interaction (à la d3-zoom) in dense scatterplots with Plot. Presumably this would work by altering the scale domains and then re-rendering the plot.

[aemonm]

It would be nice if zooming and panning were supported in geo contexts as well.

[jcolot]

In the meantime, something along those lines is working https://observablehq.com/d/223f34bca10702a3

[mbostock]

Thanks for sharing @jcolot!

[VertikaJain]

@mbostock Will this also include the zooming option for 2D/3D maps?

[Hvass-Labs]

I would like zooming in all kinds of plots, and the ability to lock either the x or y axis so it cannot be zoomed. This should also work in combination with brushing / selection of a part of the plot, so a suggestion is to use e.g. the Alt-key for zooming. In case you don't know, here is how Plotly does it, although I'm not a fan of the hovering menu they have in the corner of the plot. Thanks!

[Hvass-Labs]

It looks like you almost have the necessary functionality already, as zooming can be hacked by changing the domain values as shown in this example. This just needs to be hooked up to the mouse, so when the user e.g. holds the Alt-key and clicks and moves the mouse in the plot, it zooms in / out centered on the mouse-pointer. I think that would work great. It also needs to work with brushing / selection of data.

[deleted]

I'm excited for zoom/pan functionality to exist in Plot!

An added consideration:

In my use case, to save on data transfer time, I'm downsampling high-resolution timeseries channels to my plot's resolution on the backend, so when I zoom in, I'll need to fetch more data at some point.

To support this kind of use case, it would be great if the Zoom/Pan mark allowed you to pass in a callback that would get called with the new extents when a zoom action completes, so you can react by fetching more detailed data. This would benefit users doing dynamic backend downsampling like I am, or with anyone serving tiled data sets.

[oscar6echo]

In the meantime, something along those lines is working https://observablehq.com/d/223f34bca10702a3

FULL EDIT:

I noticed that in this example the zoom is reset at each rendering. This works in a notebook, but not really in a standalone page. In general I think this is not the best way to use d3.zoom. However this provided inspiration - thx for sharing 👍

After more exploration and getting other cues from this notebook and this comment, I could make it work properly in this notebook,

However in a standalone page, the zoom is misaligned on the x axis, but good on the y axis - and it's the same code !!! - unless typo... 👀
Is it obvious to an expert eye ?

EDIT 2:

I put this misaligned d3 zoom question on the forum, maybe a better place.

EDIT 3:

I got help from mcmcclur in the forum and after some more trials & reading the (very good) doc & watching youtube series "Introduction to Data Visualization in Observable Plot Course" (very useful) I have solved the zoom issue (see here) and can provide my opinion/feedback:

From my point of view, no need to "add zoom" to Plot, but rather improve doc about how to use d3.zoom with Plot, in particular warn user about problems induced by the figure wrapper and extra elements title, subtitle, legend, caption, and maybe try to make the Plot API a bit more systematic about these "exceptions". Finally provide an official notebook about the recommended way to use d3.zoom with Plot.

I cannot finish this much edited post with a sincere congrats to all the people making ObservableHQ and d3 !! It's fantastic 👏

EDIT 4:

For ref: I also managed an example of zooming with dual axis - even though translateExtent() values remain mysterious. d3.zoom would probably benefit from a few more official example notebooks.

EDIT 5:

I have added a use of d3.brush to control zoom in notebook @oscar6echo/plot-attempts-on-zoom - bit manual as the plot must be wrapped in an svg/g element, but works fine. I did not try adding animation with d3.transition. Not very clear to me so far.

[jaanli]

It would be nice if pan and zoom worked with Protomaps base tiles: https://protomaps.com/

Context:

• tippecanoe can convert between the Protomaps pmtiles format and geoparquet formats for use in duckdb with the spatial extension
• duckdb spatial extension is supported in Mosaic, which in turn is supported in observable framework)

Happy to help make this happen if needed! It would be a huge unlock for myself and many others.

[mbostock]

I’ve added brush-to-zoom to the mortgage-rates example:

https://observablehq.observablehq.cloud/framework-example-mortgage-rates/

Source is here:

https://github.com/observablehq/framework/blob/721ead19300031d3cae4ede41d2c85908d20141c/examples/mortgage-rates/src/index.md?plain=1#L134-L169

[mcupito]

We are looking to make a switch and hope this feature comes out soon!

[daniel-payne]

this gets a vote from me, as I am in process of moving this app into observable framework as a validation piece
I use Zoom on globe and Pan on Mercator: i have a few workarounds, using controls instead, but the UX might be better with these ported over from D3. I am giving it a go my self, not successful :( i need to learn to program better

https://www.youtube.com/watch?v=I44bHsFPZjU

thanks for the great framework