A short post about perhaps not a very useful, but nonetheless rather fun to watch effect in SVGs applied to D3.js: Gooey effects!
(note: I do understand they are a bit heavy on CPU resources, but I have not yet had any problems so far)
Edit June 2016: I’ve now written a follow-up blog on the Gooey effect that shows even more and advanced uses of the effect in (data) visualizations. You can read all about it here.
I came across a blog showing several SVG gooey effects applied to DOM elements a while ago and thought it looked interesting, but I did not yet have something in mind where it would make sense to apply.
Last week I was working on a project where I wanted to show the speeds of a ball being hit by a golf club. I was looking for an effect where it sort of looked like a golf ball being hit/ejected out in the field.
I had a green circle at the zero point, an x axis towards the right and then smaller green circles were moved from the zero point towards the actual speed. It looked fine, but a bit boring actually (I forgot to take a printscreen of this version). And then I remembered the Gooey effects, maybe that could spice things up a bit.
It took me an hour or two to finally get it to work, although in the end it is amazingly easy. I was just doing it the wrong way for practically two hours :)
Below you can see a small animated gif of the end result for my “Ball Speed” chart. As you can see, the gooey effect has no real added value besides making the animation a bit more fun to watch