EasyPZ.js Pan & Zoom

Make any web visualization interactive via pan and zoom, for mobile and desktop, using just one line of code!

Bookmark

With the EasyPZ browser bookmark, you can turn any SVG into an interactive visualization with pan and zoom. When browsing the web and seeing a vector graphic you want to zoom in on, simply click the EasyPZ bookmark and explore the visualization in much greater detail!

Drag the link into your bookmarks now: » EasyPZ «

Then try it on any SVG-based visualization, for example by opening the US Map of Nielsen Media Markets, activating the EasyPZ bookmark and then zooming in to the visualization.

Simple Automatic Mode for SVG

To make any visualization zoomable on mobile and desktop using EasyPZ, simply include:

<script src="https://code.easypz.io/easypz.latest.min.js"></script>

If you're using SVG, you can then assign an easypz attribute to the visualization you want to make zoomable. If you want EasyPZ to simply make all elements of your SVG zoomable, set "applyTransformTo": "svg > *", and EasyPZ will take care of the rest:

If you want the transformation to only happen on specific elements, you can change the selector:

This works remarkably well, even for more advanced visualizations, including animations. It works on almost all visualizations in the D3 gallery, see examples below:

Streamgraph

Choropleth

Chord Diagram

Force Graph

More demos at demos.easypz.io!

Note that all of this is possible without a single line of JavaScript code by the application developer.

Advanced Manual Mode

If you're not using SVG (e.g. canvas or webGL), or if you want more fine control over what happens when the user pans and zooms, you should consider a manual implementation of pan and zoom using EasyPZ.

Below, there is an example of using EasyPZ in a d3-based force-directed layout, using d3 scales to rescale the axis to pan and zoom. The code can be found on its block.

Below, there is an example of using EasyPZ in a canvas environment.

More explanation and examples, including a comparison with d3.zoom, can be found in our documentation.

Mix-and-match Pan and Zoom Methods

EasyPZ supports many interactions for panning and zooming, including wheel, pinch, double click, hold, brush, rub, dynamic zoom, and more. Below are some examples:

Standard

Flick Pan + Double Click, Wheel & Pinch Zoom

These methods are pretty standard. Flick pan means that the content keeps its momentum when you release the pointer, and then slows down. You can also zoom out with double right click.

<svg easypz='{"modes": ["FLICK_PAN", "WHEEL_ZOOM", "PINCH_ZOOM", "DBLCLICK_ZOOM_IN", "DBLRIGHTCLICK_ZOOM_OUT"]}'>
    <!-- Timeline Visualization -->
</svg>

For the Lazies

Flick Pan + Hold Zoom In + Double Click Zoom Out

Hold zoom in requires much less work to zoom in, particularly when compared against pinching on mobile devices. Notice that you can adjust the zoom position while zooming.

<svg easypz='{"modes": ["FLICK_PAN", "HOLD_ZOOM_IN", "DBLCLICK_ZOOM_OUT"]}'>
    <!-- Timeline Visualization -->
</svg>

How About Some Brushing?

Scroll & Two Finger Pan + Brush Zoom In + Double Click Zoom Out

Brush zooming is a very precise and efficient way of zooming, in terms of interaction per scale change. However, fast context switches and the incompatibility with standard panning make this method harder for beginners.

<svg easypz='{"modes": ["WHEEL_PAN_X", "PINCH_PAN", "BRUSH_ZOOM_X", "DBLCLICK_ZOOM_OUT"]}'>
    <!-- Timeline Visualization -->
</svg>

A More Dynamic Approach.

Flick Pan + Dynamic Zoom

To use dynamic zoom, "drag" the timeline down, and adjust the zooming position to the left or right during the process. Dynamic zoom is also a very efficient method. In our study, it fared comparably or better than the standard methods on both mobile and desktop.

<svg easypz='{"modes": ["FLICK_PAN", "DYNAMIC_ZOOM_Y_ADJUSTABLE"]}'>
    <!-- Timeline Visualization -->
</svg>