Questions & Answers is my latest project: an experiment in new, non-linear narrative forms, or what I’m calling data-as-narrative. But really it’s just a fun way to explore some of the crazy, interesting stuff people write online.

I generated this image from the genetic code of a California case of H1N1 (posted today by the CDC). I fed the data into my color tools project, and assigned one color for each base found in DNA: adenine (A), cytosine (C), guanine (G) and thymine (T). The colors were chosen by searching ColourLovers for each of those base names and using the top result, i.e. the “best” colors for A, C, G, and T, according to ColourLovers.

The outcome of a conversation with Mike and Jason during class: What would happen if you mapped red, green, and blue to x, y, and z?

Visit the project page >

Announcing the release of new research on visualizing network relationships. Play with the demo, download the presentation poster, and read the research paper.

Launch the project >

That’s not the catchiest headline, but it’s what this post is about. I’ve finally solved the problem I’ve been working on since September: how to take a bunch of circles of different sizes and group them around a central point, while preventing any overlap. See this illustration:

This turned out to be much more complicated than I had expected. If all the circles were of the same diameter, it would be easy to calculate regular positions and space them evenly. But I have a project with circles of all different sizes, and I needed them to be near each other, maybe even touching, but not overlapping. I knew it was possible, because I’d seen it done before, such as in visualizations on Many Eyes.

I started by trying to solve the problem using trigonometry. Measuring radii, tangents, and such seemed to be the answer, but got very complicated very quickly. Then I turned to the Traer Physics library for Processing. My idea was to have a central point of “gravity” that would attract the circle objects, but then make each circle repel the others, so they would sort of come together and then space out. JohnG, on the Processing boards figured out a way to do that, but his example used objects of uniform size and mass. With a variety of sizes, again, it got more complicated, and was using more computation power than I needed. After all, I didn’t need cool, fluid-like motion. I just needed to arrange things properly.

My answer came from Mike G. (thanks, Mike!), who suggested using a square-spiral approach, no trigonometry involved. Take circle A, placed at center. Then place circle B at center as well, but move it to the right one pixel. Then check to see if it’s colliding (overlapping) circle A. If so, move it down one, then left one, two, then up one, two, then right one, two, three, and so on. Keep “spiralling” outward along a progressively larger square path, and eventually you will find a point where the two circles no longer overlap.

This was a major breakthrough, and I got pretty close to figuring it out myself, but had to call in Mike for help. He sent me some code this morning for spacing out three circles. Things got more complicated the more circles I added, but I managed to get it working, finally, this afternoon. Give it a shot, and play around with adding/subtracting circles and seeing how the cluster is recalculated. As a bonus, I factored in a spacing variable, so you can have the circles sit farther apart or closer together. The next step is to integrate this into my iTunes visualization.

Launch the project >