Artful Data: Visualizing Social Movements

#JeSuisParis interactive data visualization of 60,000 tweets, by Christopher Morse.

Shortly after the November 2015 attacks in Paris I created #JeSuisParis, an eponymously named data interactive that aggregates over 60,000 tweets from the numerous individuals and communities that coalesced during the immediate aftermath of the tragedy. The visualization is an experimental interface, one that envisions new methods of exploring, describing, and making sense of social movements on the web.

Emerging alongside the sociopolitical unrest resulting from the attacks on Charlie Hebdo and a kosher supermarket earlier that same year, the #JeSuisParis hashtag reenergized an ongoing debate over notions of freedom of expression, the role of religion in society, and the disenfranchisement of communities within Paris and beyond. The hashtag #JeSuisParis was a continuation of #JeSuisCharlie, a movement sympathetic to attacks on the free press, but now with added fervor, as this secondary attack was carried out against an even larger public.

The #JeSuisParis visualization made its first debut at Harvard University in early 2016 as part of the inaugural exhibit for the Charlie Archive at Harvard Library, and was later featured in the French newspaper L’Obs. It renders the famous Peace for Paris illustration, designed originally by French artist Jean Jullien, as a full screen interactive mosaic. Each tile within the image represents a single tweet. Clicking a tile reveals the tweet inscribed within it, and choosing secondary hashtags from the menu automatically highlights all tweets that share the same tag. Finally, there is a search feature to discover tweets by keyword or phrase.

#JeSuisParis interface in action.

In the following reflection, I would like to discuss some of the artistic and computational approaches that informed the design of #JeSuisParis, and conclude with some general thoughts on the creative process, visual meaning-making, and digital storytelling.

Designing for Meaning

Twitter was abuzz shortly after news broke of the Paris attacks, and trending among the expressions of sympathy, anger, frustration, and grief was Jean Jullien’s Peace for Paris illustration. It was simple yet profound: a peace sign constructed out of a circle and the Eiffel Tower. It quickly came to represent a symbol for the times, one that embodied the very ethos of #JeSuisCharlie and #JeSuisParis. For this reason the Peace for Paris illustration felt like an obvious choice as a visual centerpiece or overlay, something around which the tweets could rally, much like many individuals already had.

In this case the visualization focused exclusively on born-digital content, some of the most ephemeral fragments of our collective cultural heritage. The chosen medium was a Voronoi mosaic designed to simultaneously represent individuality amidst a greater whole.

Voronoi diagrams are mathematical tessellations that partition a plane based on distance to a point. In other words, the boundaries of each tile within the diagram are always closest to their respective central point and no other. Each cell has its own unique shape, size, and character, an apt metaphor for the Twitterverse, a sea of voices that can self-organize into a much larger social movement: Je Suis Paris.

Art Engaging Data

#JeSuisParis employs D3, one of the most well-established and flexible data visualization libraries on the web, to render the image. In the back end, the application connects to a graph database called Neo4j that dynamically serves tweets as users interact with the mosaic. I relied on Twitter’s streaming API to collect the tweets in real-time. The front end design process is as follows:

  1. The page loads with a full screen jpeg of Jullien’s original Peace for Paris illustration, automatically fitted to the browser window.
  2. Thereafter, a uniform random sampler function generates 60,000 points comprised of x,y coordinates throughout the page, one for each tweet. Using those points, D3 renders the Voronoi diagram atop the image which defines the 60,000 unique tiles. The diagram randomly generates each time the page loads, therefore the collection of individual cells will never look the same twice.
  3. Similar to the Voronoi color sampling example, each cell within the diagram has an assigned RGB value determined by the color of the illustration below it—that is to say, if a respective tile is located within the peace sign (a color close to black), it will match the color of that specific area of the illustration.
  4. The script removes the original jpeg thereafter because it is no longer needed. The remaining collection of individual tiles closely approximates the original image.
  5. Finally, each cell adopts a unique identifier and tweet from the archive.

Voronoi diagrams arrive prepackaged with D3 and can be accessed as such:

d3.voronoi()
.extent([0,0], [width, height]);

The Voronoi method accepts an extent parameter, which defines the size of the visualization in the form [x0, y0], [x1, y1]. In the above example, if width and height are set to the browser window size, the diagram will fill the entire screen.

There are a number of ways to generate the 60,000 points required for the Voronoi diagram to draw itself, but perhaps the most straightforward solution is a uniform random sampler function.

// Mike Bostock's uniformRandomSampler: 
// https://bl.ocks.org/mbostock/fe3f75700e70416e37cd
function uniformRandomSampler(width, height, numSamplesMax) {
let numSamples = 0;
return function() {
if (++numSamples > numSamplesMax) return;
return [Math.random() * width, Math.random() * height];
};
}

The uniform random sampler takes three arguments: width, height, and numSamplesMax. The latter should equal the number of tiles necessary, and thereafter it will automatically generate x,y coordinates for each. This can be fed directly into the Voronoi function to edit each individual cell.

voronoi(samples).forEach(function(cell) {

do something to each cell (e.g. set color, add mouseover
functionality, etc.)
});

Navigating through tens of thousands of tweets, even after compressing them into a single page view, is a tremendously daunting task. Generating patterns or discovering common groupings allows visitors to focus in on specific sentiments or aspects of the larger conversation. The user interface therefore includes a list of all other hashtags within the archive. Selecting an additional hashtag highlights each relevant tile in blue and serves as a visual guide through the various Twitter interactions. The search functionality is yet another way to look for patterns or shared ideas within the archive.

Looking Forward: Artful Data for the Digital Visionary

I had the wonderful honor of being invited to speak about data visualization at WECode Harvard a few years ago, and I called my presentation Artful Data for the Digital Visionary. In contrast to many years of the same kinds of data visualization tutorials that I had grown accustomed to attending, I endeavored instead to inspire my audience rather than attempt to teach them how to code in one short hour. My argument to them: artful data visualization offers a kind of visual eloquence, a nuanced interpretation of ideas or events with the potential to connect us to aesthetic or creative experiences. For those of us who work as creatives, innovators, content curators, and artist-scholars, there is no better time to rediscover and further enhance the ways in which we practice our craft.

As Willard McCarty explains in his introduction to Humanities Computing, “there are times and contexts, such as now with computing, when meaning needs to be excavated and brought to bear on a situation we do not understand.”² In the era of ubiquitous computing and the ceaseless drone of big data, there is no better time to confront the challenges of meaning-making through artful approaches.

Notes:

¹ Peace for Paris image used with permission from the artist.

² McCarty, W. (2005). Humanities computing. Houndmills: Palgrave Macmillan.