Show HN: Easypz.js automatically makes visualizations interactive via pan and zoom | Hacker News Reader

Show HN: Easypz.js automatically makes visualizations interactive via pan and zoom

easypz.io

36 pointslazyjeff7 comments

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!

Thank you! Yeah that's right. I put up part of the official D3 gallery here, automatically applying EasyPZ: 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/ becomes 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!

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

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?

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.

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.

love the name!

Reply on news.ycombinator.com