Playing with Fibonacci in Visualization Layout Algorithms

The Fibonacci numbers are part of a sequence where each number is the sum of the two previous numbers. The first two numbers are ones so the sequence starts out like this:

1, 1, 2, 3, 5, 8, 13, 21, ...

I won't get into the details but the Fibonacci sequence, the Golden Ratio, and the Golden Angle are all related and interesting and occur in various places in nature. When I heard about this I stashed a couple constants in my MathUtils class and played around with ways to use them for visualizations. That tomfoolery resulted in the following little app:

This Flash movie is the result of playing with layout algorithms using the Golden Angle. The combobox lets you control the numbers that get highlighted, revealing some of the spirals that appear in the pattern.

More recently, I had another graph visualization project based on Constellation where I needed to layout the nodes in a resizable ellipse. Check out this test movie:

This Flash movie uses the Golden Angle to layout the nodes in this graph visualization. Nodes with more neighbours are more prominent and are placed around the outside. Roll your mouse over a node to see its edges.

I'm sure there's a lot of other interesting stuff that can be done with the numbers so grab the values below and have fun!

public static const GOLDEN_RATIO:Number = (1 + Math.sqrt(5)) / 2;
public static const GOLDEN_ANGLE:Number = 2 * Math.PI / (GOLDEN_RATIO * GOLDEN_RATIO);

Update: these ideas for node layouts based on the Golden Ratio were used in GraphViz project at Asterisq. Turns out to be a very useful effect!