Cover stories: Visualizing the spread of true and false news on social media

See allHide authors and affiliations

Science  09 Mar 2018:
Vol. 359, Issue 6380, eaat4382
DOI: 10.1126/science.aat4382
Fig. 1

Cover stories offer a look at the process behind the art on the cover: who made it, how it got made, and why.

This cover (Fig. 1) depicts the breadth and depth of the spread of two different news stories through Twitter (see the Report by Vosoughi et al.). The larger orange object (or cascade) represents a false news story, whereas the teal one represents a true news story. I aimed to illustrate the stark differences in how broadly and deeply false news spreads compared with true news, which are reflected in the relative size and complexity of the cascades.

A cascade represents a hierarchy of retweets. Person Z retweeted person Y, who retweeted person X, all the way back to the original poster. A common way of visualizing this type of data is to use a tree (Fig. 2), where breadth (how many times a given tweet is retweeted) corresponds to the width of the tree, and depth (how many “generations” of retweeting occur) corresponds to the height. Although a tree can work for relatively small individual cascades, it does not work well for connecting multiple cascades with one another. Because I wanted to find two cascades that had overlapping people and additionally to render something with a more dynamic shape, I chose a network graph to render the cascades.

Fig. 2

A small cascade rendered as a tree. Each node represents a person, and each line indicates that the child node retweeted the parent node. As is common in cascades, the initial tweet received the most retweets directly.

CREDIT: PETER BESHAI
Fig. 3

A sample depiction of two different cascades generated by the command line tool, running the force simulation in only two dimensions. In this case, purple corresponds to a false story cascade and gold to a true story cascade.

CREDIT: PETER BESHAI
Fig. 4

A rendering of the same cascades from Fig. 3, using a force simulation in three dimensions. This render simply ignores the z value to project the graphs into two dimensions for the image, inadvertently hiding much of the structure.

CREDIT: PETER BESHAI
Fig. 5

By plotting the same cascades from Figs. 3 and 4 using their 3D coordinates and then moving a camera around, I discovered that the cascades arrange themselves as jellyfish-like objects after the force simulation runs. These cascades had no people in common, so they appear as two distinct objects.

CREDIT: PETER BESHAI

The first thing to consider when rendering a network graph is how to lay out the nodes. A very common approach is to use a physics simulation called a “force layout.” In a force layout, each node (or person, in this case) pushes every other node away, and each link (person A retweeted person B) pulls the connected nodes closer together. After several iterations of the simulation are run, the graph reaches a stable position that can be visualized. There are a variety of implementations of different force simulations, and I decided to use a reasonably popular one from the D3 JavaScript library.

Fig. 6

A version of the final two cascades used, before adjusting colors and removing nodes from the render. These cascades were larger and had several people in common, resulting in more interplay between their nodes.

CREDIT: PETER BESHAI

I considered the problem of laying out the graph separately from that of rendering it. Once I had the coordinates for the nodes, I could plug those data points into a variety of other programs to try different rendering techniques. With this in mind, I wrote a JavaScript command line tool to apply D3’s force layout to a given graph and save the layout coordinates within the graph data itself. The tool also produced a simple image of the graph that enabled me to quickly understand its basic shape.

The first results using the force layout were not very promising. The cascades that I tried were small, the true and false stories had no overlap, and the structures depicted seemed very basic and lifeless (Fig. 3). To address the layout issues, I began playing with applying a modified force layout in three instead of two dimensions to see how the results varied (Fig. 4). This seemed more promising, but the simple renderings produced by my command line tool ignored the z coordinate, meaning that further investigation was required to better see the shape of the cascades.

I built a second program in Processing to render the graphs in three dimensions. Because the layout program had precomputed and stored the coordinates with the graph data, all that this second program had to do was render the graph and allow me to move the camera around to see the nodes from different angles. Immediately, I discovered that the cascades resembled jellyfish, not just disks on a plane (Fig. 5)!

I repeated this process with several other larger cascades, which really came to life when rendered with the 3D tool. With a bit of imagination, the shapes started to resemble two bodies in a struggle with one another, giving the feeling of a battle between good and evil (Fig. 6). I decided to adjust the colors to be more representative of this dynamic, using a fiery orange for the false news story and a soothing teal for the true news story. Lastly, I realized that by depicting people as nodes in the graph, I was complicating the image without adding much information. To simplify and help the cascade structure shine, I removed the nodes from the rendering and let the links tell the full story.

With these variations complete, the authors of the paper and I met remotely with Beth Rakouskas, Valerie Altounian, and Alberto Cuadra on the Science design team to discuss what would work best for the cover format. I shared my screen and manipulated the cascades in 3D space with my tool while they provided feedback on what they liked with regards to color, positioning, and the relative sizes of the nodes and links. During the call, they cleverly took a screenshot of their favorite angle, which they later placed in the cover template to give me an idea of what to produce in high resolution. After recovering from my excitement at seeing the cascades with “Science” plastered across them, I recreated the visual from the screenshot along with a dozen other angles and placed each option in the template for the Science team to choose from. They selected the option that they liked best to become the cover that we have today.

Peter Beshai, Design Technologist at Cortico

Navigate This Article