
Show HN: Easypz.js automatically makes visualizations interactive via pan and zoom - lazyjeff
https://easypz.io/
======
filoeleven
It’s worth mentioning here that this works well with D3, and examples are
provided on the page.

The author says it handles “almost all” of the D3 gallery, which makes sense
because some of those have very fancy zoom behaviors on them. I’ve written a
few D3 visualizations, and while I enjoy the flexibility of the framework, the
pan and zoom behaviors have always been a little tricky to work with.

Being able to skip all that and instead write <svg
easypz=‘{“applyTransformTo": "svg > *"}’> to get universal zoom is very
helpful!

~~~
michaschwab
Thank you! Yeah that's right. I put up part of the official D3 gallery here,
automatically applying EasyPZ:
[https://demos.easypz.io](https://demos.easypz.io)

In addition, you can get a EasyPZ demo of any visualization posted on GitHub
gist / blocks by navigating to demos.easypz.io/[blockid]. Example:
[https://bl.ocks.org/027e163073864ef2ac4ceb5c2c0bf616/](https://bl.ocks.org/027e163073864ef2ac4ceb5c2c0bf616/)
becomes
[https://demos.easypz.io/027e163073864ef2ac4ceb5c2c0bf616](https://demos.easypz.io/027e163073864ef2ac4ceb5c2c0bf616)
with automatic EasyPZ! Try it out on any block you like, and let me know if
anything doesn't work that you think should work!

------
super-serial
I like the timeline example. Do you happen to have the .svg file so I could
try out the demo?

~~~
michaschwab
The timeline examples are not simple .SVG files, since they need to react to
zooming in by replacing decades with years with months with days and so on. I
can give you a SVG file of the years-level-zoom state of the timeline, and you
could zoom in and out, but it wouldn't change the dates etc unless you would
code that in JavaScript. Does this help?

~~~
super-serial
Yeah that would help - sometimes at work I make proof-of-concept demos... and
I was thinking of making a timeline like yours but with images on a canvas as
you zoom/scroll the timeline. So I was already planning to have to write a
good amount of javascript.

~~~
michaschwab
So you're hoping I can give you the interactive version, which automatically
switches between decades, years, months etc?

I can look into providing my timeline as library, but that would take a while.
It's built on angular4.

------
runnr_az
love the name!

