How We Made “The Fed’s Balancing Act”
The Choices and Processes Behind the Reuters Interactive
The Reuters Graphics team’s unusual Fed interactive grabbed our attention when it appeared late last month and sparked some interesting conversations on Twitter. Reuters Global Head of Graphics Maryanne Murray and Interactive Data Designer Charlie Szymanski kindly wrote up their rationale and process for us.
We first worked on the idea and initial sketch of this piece last fall while planning coverage of Ben Bernanke’s departure from the Federal Reserve. We intended to publish it along with any related stories. But we are a small staff, and end-of-year deadlines were looming, so instead of centering on “Goodbye Ben,” the project got pushed back and became “Hello Janet.”
Much of the news coverage around the end of the Bernanke era and the introduction of Yellen as a nominee focused on the idea of “doves” or “hawks.” In Fed-speak, doves are those focused on maximum employment, while hawks believe in combating inflation aggressively. Rather than labeling the outgoing Fed chairman and his predecessors as one or the other, we wanted to simply examine how each chairman fared with these two, often conflicting goals.
The big question we’ve heard about the graphic has been “why rotate the axes?” This decision followed an earlier one to show the data as a scatter plot with connected points rather than as separate “fever lines.”
The Fed’s mandate is to temper inflation and unemployment simultaneously. We felt that showing both measures on a single plot allowed the viewer to assess the result as a whole.
A scatter chart also frees the element of time from a lockstep left-to-right passage. Rather than interpreting each metric individually (up or down on a single vertical axis), we switched to something closer to a path or journey. This seemed a more appropriate gauge.
From there, we charted the data. Two problems showed up: when the Y-axis represented inflation, the chart popped dramatically because of the inflation spikes during the 1970s, but changes in unemployment were less impressive by comparison; when the Y-axis represented unemployment, inflation appeared more like steady meandering than the painful ordeal it was.
The orientation of the chart privileged one axis over another. And since our original desire was to represent a dual challenge and how well each goal was met, we decided to rotate the axes.
It’s a trade-off, and not for everyone: the graphic takes longer to understand, and some viewers lose patience and move on. But our hope is that it rewards close looking, and represents the issue in a refreshing way.
When we were reviewing the charts onscreen with our economics editor, Dan Burns, he started describing all the events that affected the chart. It was great—so we asked him to do it again in front of the camera. We felt the video, by narrating the highlights and trends over the course of each chairman’s tenure, would be interesting to our financial audience and a friendly counterpoint to the abstraction of the visuals.
With the HTML5 video tag, we were easily able to match our data with video times and display callouts as Dan talked, drawing eyes toward the graphic. We wanted people to feel the video was an integral part of the presentation and not just something tacked on at the end.
The last piece we made was the introduction. The text is in HTML and overlays the SVG. The dot location was manually positioned via code, and we used simple D3 transitions to move it around. The background components are SVG content that is shown and hidden as the animation progresses. We wanted the intro to orient the reader to the rotated axes. A lot of connective tissue code has to be fired off to enable or disable interaction as things are moving around.
One thing we weren’t able to accomplish was to make the graphic responsive. It needs to take up so much space to be readable that downsizing would have required quite a bit of time. While many of our graphics are responsive, this one is really meant for the desktop.