Who supports Donald Trump? The new Republican center of gravity

Who supports Donald Trump? The new Republican center of gravity

Organisation: Guardian US (United States)

Publication Date: 04/07/2017

Size of team/newsroom:large


As primary election season ended and the Republican convention neared, it became clear that Donald Trump had a solid shot at securing the Republican Party’s presidential nomination, even if a lot of the party’s key players weren’t on board. The editorial team at the Guardian kept using the phrase “Trump’s universe,” and while the interactive team is generally cautious of literal interpretations, this felt like the perfect project to track who had been pulled in by the “gas giant.” After our success with the 8-bit characters during primary season, we knew that our audience appreciated robust information with a playful underpinning. We wanted to give them something they could both dig in and delight in. We categorized Republican positions on Trump into four categories: “Endorse,” “Support the nominee,” “Wait and see,” and “Never Trump,” and built in filters by party position and location. Users could drill down, find where politicians in their state stood, and compare them to the larger Republican Party. With each individual, we included a linked statement or press report and tracked if their position had changed over time. We also designed a lot of little amusing details so that our piece became just as outlandish as Trump’s own persona. As you hover over each position ring, Trump’s expression changes to match the category — for example, Trump appears in anguish at the outer ring of “Never Trump” names. And Republican-themed constellations are traced behind the centerpiece orbit, including “The Big Gipper,” a nod to former President Ronald Reagan.

What makes this project innovative? What was its impact?

The project hit the Guardian’s sweet spot between valuable news data and fun interactives — something that our readers, both dedicated and casual, have come to know us for. Many leading news outlets tracked the same information, but none did it with quite the same flourish. We made sure that our interactive was nimble because the information driving it could change quite rapidly. Since there was no centralized data stream for this type of information, we worked in sync with politics reporters to continually monitor news reports and update the underlying spreadsheet that powered the visualization. The orbit initially started out with one ring for each position floating around Trump, but we left ourselves room to add more as Republican positions fluctuated. At the end of the campaign, there were two inner rings for both “Endorse” and “Support the nominee” and the “Wait and see” ring was sparsely populated. The piece became a strong central resource to gauge total Republican Party support for Trump and cut through the continual media storm of individual reports. It also provided a glimpse into the party’s psyche as individuals often painstaking vacillated between positions.

Technologies used for this project:

One of the challenges of building a visualisation like this was that we needed square crops of several hundred politicians, each at a fixed size and — importantly — centered on their face, otherwise the orbiting ‘moons’ would look decidedly odd. Given our team’s limited resources and the speed with which the story was moving, cropping all the images manually wasn’t realistic. We used a JavaScript library called tracking.js to automate this process for us by detecting faces and generating the information we could use to create crops automatically. Planet Trump and the orbiting moons were rendered using Three.js, a WebGL library. Creating the visualisation dynamically like this, rather than creating it as a video, meant that the visualisation could be updated at a moment’s notice as politicians wavered according to Trump’s poll numbers. It also meant we could add delightful touches such as making the various elements respond to mouse interaction, or tilting the camera as the user scrolled to create an illusion of depth. The twinkling stars and constellations were rendered using SVG, controlled by our in-house UI and visualisation library Ractive.js. Ractive was also responsible for the bar chart and the information cards below the main graphic.
Follow this project

Comments (0)

You have to be connected to contribute

You have to be connected to follow

Leave this project and no longer be informed about this project

By joining this project, you will be informed by email when an update or a new contribution is posted on the website.

Thank you for your active participation !

The GEN Community Team