Zoom/scale chart but keep plot graphics the same size

[KreeK]

Hi, I'm new to d3 and was wondering if someone had tackled something
like this before. I'd like to have a visualization which has circles
as plot points. End-users could zoom in and pan around but when they
do so I'd like the circles to always remain 10 pixels in diameter.
Similar to points on a Google map (but without the tiling).

So far my plan is to have a background layer which is 'zoomable' and
another layer/group above it for the points. The points would then
remap themselves whenever the zoom level changed.

Is this the best way to go about it? Any shortcuts for this in d3?

thanks!

[Jason Davies]

On Thu, Sep 15, 2011 at 02:41:17PM -0700, KreeK wrote:
> Hi, I'm new to d3 and was wondering if someone had tackled something
> like this before. I'd like to have a visualization which has circles
> as plot points. End-users could zoom in and pan around but when they
> do so I'd like the circles to always remain 10 pixels in diameter.
> Similar to points on a Google map (but without the tiling).
>
> So far my plan is to have a background layer which is 'zoomable' and
> another layer/group above it for the points. The points would then
> remap themselves whenever the zoom level changed.

This sounds reasonable if you're using SVG transforms for zooming and
panning. Otherwise, you could just apply your transformation to all
elements in JavaScript, and keep the circle radii constant.

If you're using SVG's scale transform, you might find this Poincaré Disc
example useful. It compensates for super-thick strokes by modifying the
stroke-width style to maintain a constant resultant stroke width:

http://www.jasondavies.com/poincare-disc/

The code is quite short, see the redraw function for the zoom handler:

http://www.jasondavies.com/poincare-disc/poincare-disc.js

Cheers,
--
Jason Davies, http://www.jasondavies.com/

[KreeK]

Hey Jason, thanks for the feedback. That example is a bit easier to
digest than the zoom'n'pan in git, I'm headed in the right direction
now :)

[KreeK]

One more question, is it possible to set a min-max zoom range?

On Sep 16, 10:02 am, Jason Davies <ja...@jasondavies.com> wrote: