Behind the Scenes: How We Made Our “Feather” Visualization

In a previous post we walked through our process of creating a visual analysis of Donald Trump’s emotional stability during the final months of the 2016 presidential campaign. In this sequel we’ll talk about the making of phase two, in which we illustrated the contrasting emotions of Mr. Trump and past US presidents using footage of their inaugural addresses.

Over the first half of this project we gained some familiarity with the Microsoft Emotion API and confidence in its usefulness for pulling out compelling sentiment data from images. We saw that the numbers confirmed our impressions — Donald Trump’s emotions during the presidential campaign were fierce and unstable.

Using the same tool, we saw an opportunity to widen the scope of our investigation of Mr. Trump by analyzing his upcoming inaugural address and those by past presidents. We were curious to see if the emotional messages he had displayed during the campaign would shift and just how presidential he could become when the day to take the oath of office finally arrived. The inauguration provided a good, controlled test — same venue, same occasion, same purpose — to compare the ‘emotional profiles’ of Mr. Trump and his predecessors.

Preparation

We set about collecting videos of past inaugural addresses, extending back to Ronald Reagan, intending that Mr. Trump’s speech would be added in once it occurred. The video editing and processing followed the same procedure as our first piece — cropping out faces in the background, removing audio, calling the Microsoft Emotion API — except that these speeches were short enough that they didn’t require chopping into segments and reassembling.

Beneath the Surface

This time, after inspecting the data in Tableau, we noticed that many of the speeches had very few non-neutral primary emotions. This wasn’t too surprising given that an inaugural address is traditionally more composed and less animated than a campaign speech. So we decided to read a little deeper and see what might be under the surface of the neutral emotions.

Since the API calculates confidence scores across all eight emotions, we pulled out the second-ranked emotion for each event where ‘neutral’ was first-ranked. Admittedly, this is stretching the normal usage of the data returned by the API, but it seemed reasonable to make use of the data so long as we made the distinction between primary and secondary emotions clear to the reader.

Visualizing

For this piece we wanted to play around with a more artistic and expressive presentation method — focusing on a single visual element rather than a dashboard — to describe each speech. So we went back to Processing to allow for freer visual experimentation as we developed our ideas. Using Reagan’s first address as our guinea pig, we started with a basic bar chart similar to the tassel shapes used in the first piece. This was a fairly dynamic speech with plenty of non-neutral primary emotions, possibly owing to his past experience as an actor.

What followed was a series of small changes and innovations, drawing some design inspiration from an academic paper proposing a new visualization technique for evolving social networks that used line angle to encode a third variable in what would otherwise be a bar chart.

The paper’s small multiples of strongly angled charts inspired us to experiment with angles and, eventually, curves in our visualization.

This last step, while also improving the style, added a key feature to the shape, allowing viewers to quickly make high-level comparisons between the speeches.

Running each subsequent inaugural address through the script revealed a varied set of emotional profiles. Some president’s speeches were expressive and uplifting, others completely flat and devoid of noticeable emotion. But all shared one trait in common: the overall tone was either neutral or positive. We could only imagine how Donald Trump’s speech would compare to the rest of the flock.

Inauguration Day

On the day of his inauguration we rushed to download and process the video of his speech. A couple of suspenseful hours later, out popped a startlingly crimson-orange, drooping feather. The disparity between Mr. Trump’s inaugural speech emotions and the preceding five presidents was striking. He was quite the angry bird.

Decoding the Feathers

With the addition of Mr. Trump’s feather, our set was complete. The resulting series of abstract shapes looked intriguing and certainly comparable; but we still wanted them to be an interpretive tool — allowing viewers to explore the details of the data — and not only data art. They needed an effective legend.

Our approach here was aimed at simplifying the interpretation of feathers as much as possible by reducing the level of abstraction between subject and legend. We used a magnified section of one of the feathers to label the distinct emotions that corresponded to each barb color, rather than a traditional list of color blocks with corresponding meanings.

We used mini, grayscale versions of actual speech feathers to illustrate overall positive or negative curves, instead of just a curved line simulating the spine. In this way, the viewer knows exactly how to decode the information when they look at each feather.

Layout and Interactivity

As in the first piece, we incorporated the source videos into the page so readers could observe the subject’s facial expressions as they explored the emotional events along the feather timeline. We also included some historical context for each inaugural address to remind the reader of the issues and events that were likely weighing on each new president’s mind and reflected in their speech.

For Donald Trump’s address, we chose to annotate a larger version of the feather with pull quotes corresponding with each of his peak emotions. Placing this at the top of the page, we hoped this would give an immediate indication that each feather represented a speech and provide a bridge to the text-based analyses seen throughout the media.

Take-aways

Trying to quantify a qualitative thing like emotion provided some unique challenges. The tool we used attempts to objectively measure something which is usually subjectively interpreted. While this is useful in opening up human emotions to unbiased analysis, it challenged us to try to complete the circle and bring back some ‘feeling’ into the final visualization.

Something that became clear through developing this piece was the power of non-traditional visualization types to convey emotional data. An expressive shape can help viewers more-easily interpret and empathize with the data you’re presenting. That perky, green feather looks happy. That droopy, orange feather looks sad. In short, use an emotive shape for emotive data.

As the world is increasingly inundated with data we encourage people to continue to look for creative means of data collection and data presentation. Start with the tried and true forms, for sure, but start experimenting and you can discover exciting ways to extract insights and engage audiences.