Easypz.js: Interaction binding for pan and zoom visualizations

EasyPZ captures, aggregates the events, and identifies pan and zoom gestures.
EasyPZ captures mouse and touch events, aggregates the events, and identifies pan and zoom gestures, such as pinch or brush zoom. These gestures can be used for pan and zoom in three different ways: 1. The EasyPZ bookmarklet temporarily enables pan and zoom SVG visualizations without any code changes. 2. The automatic mode of EasyPZ permanently enables pan and zoom on a SVG visualization with a simple HTML change. 3. In the manual EasyPZ mode, a SVG, canvas, or WebGL visualization can respond to pan and zoom by providing detail on demand, such as showing state borders when zooming in to a country.
Abstract
The creation of data visualizations has become easier as the skill barrier to our tools has decreased. However, adding interactivity, such as gestures for pan and zoom, still requires significant coding expertise. We introduce an open-source library-EasyPZ.js-for the creation of multi-scale (pan and zoom) visualizations across desktop and mobile devices. EasyPZ is fully customizable and extendable with flexible options for interaction design. For example, it is easy to choose gestures which are compatible with selection interactions such as clicking. EasyPZ can be enabled on any SVG-based visualization on the web with one line of code, or by simply clicking a bookmark without requiring commitment to code changes. With this library, we contribute ways for the visualization community to more easily author interactive multi-scale visualizations.
Materials
PDF | DOI | Homepage | Demo video | BibTeX
Authors
James Tompkin
Jeff Huang
Citation
Thumbnail image for publication titled: Easypz.js: Interaction binding for pan and zoom visualizations
Easypz.js: Interaction binding for pan and zoom visualizations

Michail Schwab, James Tompkin, Jeff Huang, and Michelle A. Borkin. Proc. IEEE Visualization Conference—VIS. 2019. DOI: 10.1109/VISUAL.2019.8933747

PDF | DOI | Homepage | Demo video | BibTeX


Khoury Vis Lab — Northeastern University
* West Village H, Room 302, 440 Huntington Ave, Boston, MA 02115, USA
* 100 Fore Street, Portland, ME 04101, USA
* Carnegie Hall, 201, 5000 MacArthur Blvd, Oakland, CA 94613, USA