School > INFO 424 > Visualization Critique 2
Good Example 1 - Digg Swarm
Summary
Digg.com is a social news site. It users submit stories that they find interesting, and other users can choose to "digg" or "bury" a story, based on whether they like it or not. The more people who like a story, the more exposure it gets, with stories that receive enough attention automatically being displayed on the front page. Thousands of stories are submitted every day, and millions of users participate on the site.
Digg Swarm is a visualization tool that was designed to help users visualize the activities of all these users and track stories as their popularity rises and falls. Users fly around the visualization, gradually building up the popular stories while letting the inactive ones fade away. It is implemented in flash and is available via the digg.com home page.
Static Deconstruction
The visualization looks almost like molecules floating in a liquid. Circles with text in them represent stories, with a small portion of the title of the story displayed in each circle. The number of users who have dugg the story while you have been watching is encoded by the size of that story's circle. Additionally, the number of diggs that stories have received overall (as opposed to just while you were watching) is represented by the saturation (value) of each story circle. Gray circles have very few diggs, bright yellow circles have a large number of diggs.
Digg.com users are represented as solid circles. Each time a user diggs a story a circle representing that user is attached to the story. These user circles fade with time if they remain inactive (as do inactive stories), but if they digg other stories, then their circles detach and move over to form connections with the new story. The more users digg, the larger their circles become, so that active diggers are represented by larger circles.
When the same users digg different stories, relationships between these stories begin to be established. As these relationships are formed, the circles begin to drift more towards each other. The greater the attraction the more strongly they want to appear in close proximity. Therefore, position is used to encode these relationships. Whenever a new relationship is formed, or an existing relationship is strengthened, lines are temporarily displayed to show that relationship. The thickness of these lines then is used to communicate how strong that relationship is (as measured by the number of users who dugg both stories).
Interactive Deconstruction
The interactions for this visualization focus heavily on providing overview + detail. Augmenting the basic display I mentioned above, there are a number of different interaction patterns that offer the user the ability to seek more information about what they are seeing. Holding the mouse over a story will display the full title story. In addition, the relationships between that story and other stories are also displayed as long as the mouse over continues. Likewise, holding the mouse over a user circle will display the username. These triggers allow this information, which would clutter the display if always on, to very easily be toggled on to view more information on a specific topic. The choice of the mouse over action in these cases is a good one. It allows users to use their cursor as a magnifying glass of sorts to get more information. At the same time though it recognizes that this particular action will almost never be used in a context where it is meant to stay on, or performed for a long period of time.
On the other hand, clicking on a story circle will cause the circle to move into the center of the display and expand to display more information. As it expands it pushes the other stories and users off the edges of the screen and slows their motion to a stop and fades them out slightly to make the selected story pop out and remove distractions. The expanded circle displays things like exact number of diggs, full story title, description, date submitted, user who submitted the story, the number of comments, and the category the story was posted in. Also in this enlarged circle is another important interaction control. Two options are include "Kill this story" and "never let this story expire". These reflect modifications of the default behavior of the application. Usually stories that have not been active for some time are automatically eliminated from the display (to keep the display from becoming too crowded). These two options allow the user to specify that they would like to lock the display of stories they are interested in, or to suppress further information on stories that they are not interested in.
Finally, in addition to the default drifting behavior of stories, users also have the option to drag elements to new positions. As they drag stories, their related stores at tugged along with them, bound by those relationships, and other stories are shoved to the sides to make room. This function allows users to create their own spatial groupings without the input of the tool, and could be very useful.
Critique
The visualization uses many different interaction methods, from continuous dragging of stories, to stepped interactions such as zooming in on a story, and even passive interactions of watching the visualization as the users of digg do new things and they are reported. They use all of these different methods to great effect, to display massive quantities of information in real time in a way that is not otherwise realistic.
I think the greatest opportunities for improvement lie with the static aspects of their visualization. In particular I was unhappy with their choice to encode the total number of diggs a story had received with the color value. It was very hard to distinguish more than a few levels of popularity with this particular encoding, especially with the limited area occupied by those colors. Their choice is understandable however in light of the fact that many of the more appropriate encodings were already in use by other variables. At the very least I would have increased the area that the color was used in, so that users had a more clear perception of color that represented this value. A better solution might have been to use size to encode two different things. The story circles could have been divided into a circle and a border. The size of the inner circle could be used to encode the number of diggs the story received while you were watching, as is currently the case. But in addition to that encoding, the thickness of the border could also be varied to represent the number of diggs overall. Alternatively, these two encodings could be swapped, which might support the metaphor they are using somewhat better in that users would leave a sort of "residue" behind as they swarmed around stories, which would form as the border.
Good Example 2 - Vizter
Summery
Vizter is a tool for exploring tbe social networks of users on sites like Friendster and Orkut. It allows you to view connections between users, identify degrees of seperation, find common acqaintences, search for users, identify social groups, and explorer and/or filter by the distribution of different user attributes.
Static Deconstruction
The fundemental structure of this visualization is that of a set of nodes which are interconnected, Each user is represented by a name and possibly a picture on the graph. Relationships between users who have marked each other as friends are displayed by drawing a line between those two users. As with diggswarm's related stories, nodes in vizter are attracted to each other based on their friend status. The graph is aranged in a way that tries to keep all nodes as close as possible to the rest of their friends. In general, users will generally be put in close proximity to the majority of their friends.
Vizter has the ability to highlight allvthe users who are within 2 degrees of seperation of another user. This is done by splitting the design into 2 layers, lowering the saturation of all users and relationships that do not match the criteria, and increasing it for those that do.
Another of its significant functions is the ability to idenify and display social groups on this graph. Users tend to naturally group based on their shared sets of friends - but vizter augments this grouping by providing the option to make these groups more visually explicit. While the fact that related nodes are arranged close together provides a cue into bonds they share, this grouping focuses more on the boundries between groups. Idenified groups are enclosed by a figure, and different colored borders and backgrounds are used to represent each group.
One of the final display features of the site is that it provides an "x-ray mode", which allows the images for all the users to be replaced with color information that can encode one of many different user variables. These variables can range from nominal variables like relationship status, to quantitative variables like age or number of friend links. Toggling between these views provides a richer mode of exploration where you can look not just at who is connected, but at what attributes make people more likely to connect with each other.
Interactive Deconstruction
A basic interaction with this tool is to hold your mouse over individuals on the graph. Doing so pops that user and all users within 2 deggrees of seperation of them up above the rest into a new layer. Once this layer seperation exists, you can change the relative sizing of the selected and unselected nodes, this allows them to be viewed in the greater conext of the social map as a whole.
Common relationships between two nodes can be idetified by clicking on one user, then pressing the space bar when the mouse pointer is over another nodes. Any common friends between the two people will be pushed between them and their relationships will be highlighted.
Additionally, the nodes in the graph can be filtered by a search query, with nodes that match the query moved to a seperate layer in the same way that they are in response to a mouse over event. A different color is used for these nodes than nodes that have been moused over, to help these two interactions to exist simaltaniously
Critique
For the most part Vizter works very well. It provides real insight into the structure of social networks that is hard to see in another way. I think the display of users in this kind of graph is very well suited for representing relationships, and I think that the static visualization aspects of this project were done very very well.
I did however have some problems with the interactive aspects of the visualization. While interaction did add a lot to thee system, I thought that it could have been improved. One thing I found particularly problematic is that the interactions were non-obvious (mouse over and press space), there were no real affordances and sometimes visual cues were miss-applied (checkboxes acted as radio buttons for example).
Also filtering can only be done for 1 search string at a time, which I think limits the useful of a filtering feature by restricting the expressiveness that users have when creating filters.