Jan 4, 2008
Digg Pics is a dynamic visualization of images as people vote for them.
Generally, when we work on a new visualization, we start with data that is already flowing, and look for interesting patterns or tendencies that already exist. In Digg's case, this is usually a particularly fruitful process because of the tremendous volume and interconnectedness of the data that flows through the site every day.
When it came time to visualize Digg's newly launched images section, though, we found ourselves needing to get started on it before the section was live and running. So we had to improvise. We decided to use images from ffffound.com, an image bookmarking service that we use alot around the studio, as a source for the images, and use general Digg traffic as the source for the continuous flow of interrelated content that people care about.
We started off by taking a look at the spread in the number of diggs that we could expect, and dynamically sizing and placing the images accordingly:
It seemed like the obvious thing to do: an image with more diggs gets bigger as people vote on it, and smaller, less important images are smaller and turn over quite quickly. The trouble with this method is one of emphasis: while it's great to be able to see what people are paying attention to at any given moment, the visualizations in Digg Labs are also supposed to give people a better way to find new content that people haven't already jumped all over. So we needed a way to show more images, and not necessarily exclusively focus on what was already popular.
So we broke the images up into the various sections on Digg, laid them out in horizontal rows, and kept the sizing intact. It looked like this:
We tried many different kinds of layouts here: vertical centering, inverse sizing (small images were ones that no one's dugg yet, large ones were the most popular), etc.
They were all fun experiments, and you got a sense immediately for what was popular. A big problem with this approach, though, was how to fit everything on the screen at once: if images are scaling any time a new digg comes through, the heights of the rows has to change accordingly, and then everything else has to move as well. And with the number of diggs that typically come through in a given minute being in the high thousands, the piece started to get, well, a bit squirrelly...
So we intentionally limited ourselves to images that were all the same size, and started thinking about using different variables: position left to right, blinking or turning off the images when they were dugg, etc. What I think we hadn't quite realized up front was that we weren't dealing with an abstraction of data, as we often are - we were dealing with raw images that people needed to be able to see, and this opened up a new kind of challenge. There's a persistence of vision issue we're dealing with, and if images are flickering or jumping or moving too quickly for you to see them, you'd get lost.
So we kept the images the same size, and were sort of stuck here for a while:
Ultimately we realized that when an image was dugg multiple times, we could take that image and repeat it as many times as it was being dugg. In this way, we got to keep the underlying strucure in place, a resting place for your eyes so things weren't all over the place all the time - and use the repetition of the images as an indication of their curent popularity:
At this point things pretty much designed themselves, and images and strips could open and close in response to user input:
The piece is live at http://labs.digg.com/pics/, Enjoy!