Old school D3 from simpler times

In this example I try to showcase how the Gooey effect can be used with data visualizations. There are 3 different states that this visual loops through which lasts 15 seconds in total. It appears on my blog on More fun data visualizations with the gooey effect.

First we start with a center circle. From this circle 150 other circles start flying out with a gooey effect applied. These 150 circles represent the 150 largest cities in the world according to this page on Wikipedia. The circles are also sized to the population.

When the transition of the circles flying to their endpoint is finished, the gooey effect has been slowly turned down so that you cannot see its effects anymore. The opacity of the circles is turned down a bit for a nicer result.

The second step, which is another idea for the gooey effect, shows the circles coming together in a force layout where the circles are grouped according to their countries. Instead of showing the circles all separately, the gooey effect is slowly turned on again so that the circles mush together into 1 blob that represents the country. I do want to note here that the surface area is no longer exactly representative of the underlying circles, since the space between the circles will be filled with color as well.

In the third and final step, the circles move back into their center arrangement and the loop starts anew

You can find the other examples from the blog here

- Hexagon with gooey circles moving inside
- Rotating circles without color blending but with true sizes
- Rotating circles with color blending but slightly smaller sizes due to filter
- Gooey collision detection

Older examples with the Gooey effect

- Movement along a line
- Moving in and out of a circle
- Falling in and out of a rectangle
- Swing analytics - In the 3rd view the swings will be displayed using the gooey effect

Built with blockbuilder.org

forked from nbremer's block: Gooey effect - Data visualization showcase

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js