Planning

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.

Design

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.

Video

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.

Code

The graphic makes extensive use of JavaScript and HTML5. We typically use the Backbone framework to organize our JavaScript-driven graphics and applications. That makes it easy to embed our content elsewhere if needed. But in this case we created a simple page to hold it. The graphic itself is drawn as an SVG using D3. Data is pulled from a simple CSV that has month-by-month data. The basic process is to load the CSV, create a Backbone collection from it, and then a view based on that. Some of the content is hard-coded, like the background axes, which were drawn in illustrator and exported as SVG right into the JavaScript template.

Most of our graphics originate from a fork of the HTML5 Boilerplate project that has most of the stuff we need to make an interactive. We use Grunt to compile JavaScript files, LESS files, and JavaScript templates to create a simple package that can be used to embed the graphic. Once you’ve got that set up, it works pretty well. In the future, this process will make it easy for us to provide graphics to our clients in a way that’s simple for them to embed and shouldn’t conflict with their own code.

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.