The concept that something can go viral — trending hashtags, videos or tweets — has become a pretty regular part of our daily lives. But with the rise of viral internet culture also comes the rise of individual brushes with virality.
For a recent story about how Washington Post editor Doris Truong became the center of a partisan online flame war, we wanted to illustrate what happens when one person becomes part of viral false story and subject to online trolling.
Here is a breakdown of how we gathered the data and how we made the graphic.
First you need to get credentials set up and the right coding libraries installed to tap into the Twitter API. Here’s a quick guide on how to do that.
For this story I wrote a script that uses the Twitter API to search Twitter for “@doristruong”. You can search for any hashtag, handle, term or phrase and grab any tweets from the last 7 days that match. The script I used is twitter_searcher.py and our guide includes basic instructions for running it.
Once we had the data, we used Google Spreadsheets to organize the data for our graphic.
How to visualize a troll attack
One of the things I’ve been fascinated with when telling stories with data is the element of time. I spent four years of my early career telling stories with videos — linear narratives that unfold over time. I only became a full-time coder about four years ago. Marrying the power of immersive linear storytelling with data graphics was always something I wanted to explore further and this project seemed like a perfect fit for this.
One of the key aspects of Truong’s experience was that the barrage of mentions hit her out of nowhere and with a force of a thousand tweets — literally! In just … minutes her online life went from that of an average Twitter user to that of a major public figure.
Pitch Interactive’s Wesley Grubbs at a Creative Mornings Oakland event, talking about the importance of time in his company’s work
To really show what it’s like to be become subject of a viral controversy, I decided to play with an animated graphic you see in the gif above that shows Twitter mentions over time.
Animating data without killing your browser
But how do visualize and animate roughly 24,000 data points?
Even though I ended up only animating roughly 5,000 dots I still had to make sure I wasn’t going to stifle my browser — especially on mobile phones — with a bunch of DOM elements floating across my screen.
As with many other graphics editors, I often use D3.js — which stands for data-driven documents — for highly customized data visualizations. Here’s a thing you need to know about D3: the library makes it really easy for you to take values from a spreadsheet and bind them to an object, like a circle for bubble charts or a rectangle for bar charts. D3 then takes each value you want to visualize and produces an SVG (Scalable Vector Graphic) for each data point.
The issue with creating an SVG for each data point can become too much for your browser to handle when you reach a few thousand data points. Imagine having your browser go through 24,000 lines of code to render each circle and to have to make each circle move the way we did for that animation.
Enter canvas! Canvas HTML5 elements are actual tags that allow you to manipulate pixels. The concept is a little bit like using an Etch-A-Sketch to draw something — you change every single pixel til you get the desired image.
To animate each dot then, you only have to update your etch a sketch every few milliseconds. So instead of moving around 5,000 individual HTML elements (SVG tags), you’re simply changing what’s shown in the one canvas element you make.
The way this works is like animation used to work in the old days when Walt Disney and his pals used to draw 20 plus individual frames for each second of animation footage. Below is a video that’ll illustrate what I mean:
What’s also important with time-based data visualizations is to have a sense of orientation. When we’re watching videos or animations we want to know where in the chronology of events we are and what we have just witnessed (how many dots just flew at us?).
For that purpose we made two counters: one that documents how many dots have just flown across the screen and how much time has passed.
If you want to make a graphic like the one we made please find the code with instructions here.