Skip to content

Panning and zooming #1590

@mbostock

Description

@mbostock
Member

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.

Activity

aemonm

aemonm commented on Jun 8, 2023

@aemonm

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

jcolot

jcolot commented on Jun 20, 2023

@jcolot

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

mbostock

mbostock commented on Jun 20, 2023

@mbostock
MemberAuthor

Thanks for sharing @jcolot!

VertikaJain

VertikaJain commented on Nov 8, 2023

@VertikaJain

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

Hvass-Labs

Hvass-Labs commented on Dec 9, 2023

@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

Hvass-Labs commented on Jan 4, 2024

@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

deleted commented on Jan 5, 2024

@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

oscar6echo commented on Jan 24, 2024

@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

jaanli commented on Feb 18, 2024

@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

mbostock commented on May 16, 2024

@mbostock
MemberAuthor
linked a pull request that will close this issue on Jun 13, 2024
mcupito

mcupito commented on Jul 5, 2024

@mcupito

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

daniel-payne

daniel-payne commented on Nov 1, 2024

@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

linked a pull request that will close this issue on Nov 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @deleted@mbostock@jcolot@aemonm@oscar6echo

      Issue actions

        Panning and zooming · Issue #1590 · observablehq/plot