Observable Plot: zoom

Help
1

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.

2

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

3

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.

image
image1139×650 41.8 KB

image
image1021×642 59.2 KB

4

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.

5

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

6

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