I built Debate Diagrams to make sense of the Democratic primary debates. In such a crowded field, the candidates need to distinguish themselves: one strategy is direct comparison. Debate Diagrams parses the transcripts of 5 officially sanctioned Democratic debates to place an arc between two candidates when one mentions another by name. The arcs become denser as they continue doing it.

My visualization draws substantial inspiration from Martin Wattenberg’s fantastic piece, The Shape of Song. It also follows on the heels of a similar visualization produced by the NY Times for last Sunday’s paper. It’s my first project in Flex.

Try the interactive version!

image adapted from Many Eyes

Visualization Annotation at Internet Scale, Social Data Analysis Workshop, CHI 2008.

Abstract
Visualization annotation allows users to communicate within a visualization as opposed to outside it. While effective in research settings, the technique has not found a home on today’s social data analysis sites. Scaling the technique to an Internet-sized audience represents the most significant obstacle to its wide-spread adoption. In this paper, we discuss the problem and propose four interaction techniques to help visualization annotation scale for a Web audience. Our designs strive for clarity of the underlying visualization while providing integrated and rapid feedback about annotations.

Full paper as PDF

white and black workers in Chicago

I started a submission to the InfoVis 2006 contest last year, but I decided not to submit it a few weeks before the deadline. The code has hung around my Processing directory for over a year, untouched. During an after-class chat, I brought it up with Karrie and she suggested that I put it here. I decided not to submit mostly because I was a naive first-year student. (The data contains a significant amount of noise — the locations are not exact, for example — but the “triangulation” from many different individual surveys evens it out, IMO.)

The image above shows three screenshots from a visualization of white and black workers in Chicago. Chicago is a notoriously segregated city, and I was interested in whether jobs do anything to bring whites and blacks together. I extracted the data from the 1% PUMS Census dataset. The visualization makes the following mappings: worker’s home (center of circle), race (circle color), length of daily commute to work (size of circle, animates through the commute) and the aggregation of all workers in Chicago at any moment of the day. The visualization animates through time, but unfortunately I could not get Processing’s movie maker library to give me something presentable.

the concentration of wealth in Chicago at different times of the day

The second image (above) remaps yearly salary to color (to the saturation of green, particularly). You can watch the city wake up, and you can see when the poor, the middle-class and the very wealthy stockbrokers leave for work in the morning. There is a substantial second-shift around 2:00 PM as well. (I wish the Census data included “return home” time too, but alas.) It’s really quite neat in animation: I included a little feature that highlights all the people just leaving for work, then fades them to their appropriate colors shortly thereafter.

Living in the prairie, I like grasses. This weekend, I played around with code that generates a system of grass (or cords) bundles (like CAT5 cords). A sprig of grass usually joins an existing bundle, but with some very low probability will strike out on its own. Thick clumps have a higher probability of getting new sprigs than thin clumps: a rich-get-richer scheme. Sprigs that do not attract any friends get killed off by a periodic layer of transparency. The three images above represent 3 different experiments to distribute the clumps: dense noise, sparse randomness and dense randomness. No data…just something to do besides read research papers for a while.

CodeSaw: A Social Visualization of Distributed Software Development, Interact 2007

ABSTRACT
We present CodeSaw, a social visualization of distributed software development. CodeSaw visualizes a distributed software community from two important and independent perspectives: code repositories and project communication. By bringing together both shared artifacts (code) and the talk surrounding those artifacts (project mail), CodeSaw reveals group dynamics that lie buried in existing technologies. This paper describes the visualization and its design process. We apply CodeSaw to a popular open source project, showing how the visualization reveals group dynamics and individual roles. The paper ends with a discussion of the results of an online field study with prominent open source developers. The field study suggests that CodeSaw positively affects communities and provides incentives to distributed developers. Furthermore, an important design lesson from the field study leads us to introduce a novel interaction technique for social visualization called spatial messaging.

Full paper as PDF