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:
Note that all of this is possible without a single line of JavaScript code by the application developer.