Observable Plot: zoom

Hi, all
The chart I am currently drawing is using plot.
I saw an example of combining plot and d3 to achieve zooming function on Observablehq(Observable Plot: zoom / Observable | Observable), but I didn’t see the effect I wanted to achieve. I want an effect similar to this: Zoomable Scatterplot / D3 | Observable
What should I do?
Thank you for your advance help.

Hi there!

Could you specify which part in particular you’re looking to achieve? It seems that the 2nd and 3rd implementation are close to that D3 example.

Best,
Paul

The 2nd and 3rd implementation examples only scale one axis, and I want to scale both axes simultaneously. In addition, the drawing section in the second example exceeds the axis, while the third example does not exceed the axis, but it has colors.


Ah, so when you update the chart based on zoom, you’ll want to filter the data based on the new xDomain. What you would do here is add a filter on the data for the dot mark to exclude those that go beyond the new domain. This example is a little more difficult because of the date transforms, but that’s the general idea.

I hope not only the x-axis but also the y-axis needs to be scaled, so is this filtering data in two domains?

My notebook: Plot: Attempts on Zoom / Cui's Workspace | Observable