← Back to index

Hi. All my current writing is over at Audacious Fox, and I'd love to show you around. Thanks for reading.

Generating graphs with Processing

Ben Barry’s post on designing the 2011 Facebook f8 Conference remains one of my favorite pieces about design on the internet. As I was reading back through it the other day, I came across how Barry had gone about generating those signature Facebook graph images.

While working on f8 2010 we developed a rudimentary Processing script that allowed us to generate graph imagery. For 2011 we dusted it off and polished it up. With a some additional work we developed a robust tool that allowed us to rapidly iterate and develop graphics for a variety of applications. Because of the speed and flexibility it afforded us the entire graphic system for this years f8 was built using imagery generated with Processing.

With nothing to do on my Saturday night, I downloaded Processing and thought I’d try to recreate Barry’s technique.

more graphs more graphs more graphs

I ended up getting pretty close.

My script, which I ended up calling GraphMaker, starts by randomly placing nodes on the canvas. It then goes through every node and gets a list of nodes within a certain distance to that particular one. Then it’s a simple matter of drawing lines from the original node to a limited number of close neighbors.

The results looked good, and I spent at least half an hour just tweaking all the parameters that go with each node (color, size, max distance a line can be between two nodes).

However, even though the graphs from my script look similar to the ones from f8, there’s one significant flaw that I could never figure out how to fix: overlapping nodes.

Regardless how dense Barry’s graphs, no node ever overlaps any of its neighbors - mine do. It’s a subtle difference, but one that significantly impacted the quality of my images at the beginning. Eventually, I was able to compensate by having each node retain a slight transparency which enables you to still see individual nodes even when they overlap.

For now, my random-graph-making itch has been scratched, but I hope to revisit this one day and implement a check to ensure that each new node has a little space from its neighbor. Until then, feel free to check out the script on GitHub and have some fun.

The final interesting thing from this experiment, that my girlfriend actually pointed out to me, is that each image resembles a constellation. Funny, yet oddly profound when taken in context with our own social graphs and the world around us.

UPDATE: A reader, Lalith P., sent me an email with his solution to the overlapping-nodes problem I was having. Thanks, Lalith!

Monday, 6 May 2013