Over the past few weeks we've done a lot of thinking about timelines. We made one that recounted the history of FDA fines levied on the Red Cross, another one that traced the changing government approach to fracking, and finally one that described the day-by-day unfolding of the Komen/Planned Parenthood debacle. Each was pretty different and went through multiple iterations before arriving at its final form. Here's the story behind each one -- the thinking, planning, and building of each timeline, complete with some of the approaches we rejected along the way.
A History of Red Cross Blood Penalties
Since 2003, the FDA has hit the Red Cross with over $46 million in fines for violations in its blood services. Many of the violations, listed in a series of FDA documents, show up again and again, year after year. We wanted to present the history of these fines, emphasizing how often -- and how much -- the Red Cross has had to pay for unsafe blood handling. We also wanted a way to make the documents themselves public, so anyone could dive into the details. Finally, we wanted to emphasize that these multi-million dollar fines kept increasing.
We knew from the start that we'd use DocumentCloud for this project. DocumentCloud lets us upload and organize all of our documents and write notes on particular sections. So for example, we could indicate where in each letter a reader could find the total fine.
But DocumentCloud doesn't provide a visualization quite like what we had in mind. So we used ProPublica's own TimelineSetter. I learned how to set up the CSV file and make the timeline from these instructions, which were surprisingly simple. I also learned about DocumentCloud's "Embed a Note" feature, which let us stick an image of a portion of the document right into its TimelineSetter entry.
At this point we had a series of documents, organized by time, and a clear indication of the total fine on each event entry. But there was still no way for a reader to see the penalty amounts at a glance without clicking on each "card" in the timeline. So we color-coded the entries based on fine amount: green for fines less than a million dollars, and yellow for more than a million. TimelineSetter makes that easy -- we just needed to put two labels into the "series" column in the CSV file.
Embedding the document images into TimelineSetter was easy, but getting them to fit into their allotted space underneath the horizontal bar was much trickier. The document notes were about 700px wide, and ProPublica's pages are 960px wide, so there wasn't enough room for TimelineSetter to place each card. We ended up setting the width on each note to 440px, which shrunk the image but left the words legible. The LA Times addressed the same problem by having each event automatically scroll to fit.
That problem points to a larger issue: the horizontalness of timelines. A horizontal format is great because you can see the entire timeline right away, and at least in western countries, we instantly know that time should be read left to right. The trouble is, unlike this gorgeous old print timeline, on the web horizontal often means not much room. Actually, anything on a computer screen means not much room. To try to replicate the high resolution of a print timeline, one approach is to layer the details onto a separable views (like TimelineSetter does), while another is to present all the details in a column the reader scrolls down, like Facebook does.
From Gung-Ho to Uh-Oh
The U.S. government has been involved with fracking since the late 1960s, but the nature of that involvement has changed over time. Enthusiastic fracking experiments (some involving nuclear explosions) eventually gave way to more caution, more calls for regulation and more investigation as information came out about fracking's potential dangers. We wanted to chart how these attitudes changed over time, and at the same time point out and link to our previous stories about fracking (there are a lot of them).
The first few stabs at organizing this timeline didn't go so well. We first thought we could organize the chart by government branch or agency: put all the EPA regulations over here, the Department of Energy stuff over there, congressional reports way over there. That was just boring. Then we tried organizing it spatially, putting all the air-related fracking events on top, the water ones in the middle, and the underground ones on the bottom.
But that didn't seem right either -- do studies on groundwater contamination go in the water section or the ground section? And why make that distinction anyway? It didn't seem at all useful. People don't really categorize fracking contamination into specific locations -- they care more about its overall effects on health and the environment.
So after some brainstorming we decided to organize the events by government attitude, which in retrospect seemed obvious (it was the whole narrative of the story). We thought of color-coding the events using a gradient from green to red, but eventually threw that out because it wasn't quite accurate -- the government is still very excited about natural gas as an alternative energy and doesn't want to stop fracking entirely, -- and the color mix made for a very brown table.
But to represent the idea of governments introducing more regulation and proceeding with caution, we went with a gradient from green to yellow. Along the way I learned about two color-related tools: ColorBrewer, which generates easy-to-distinguish colors for maps (or timelines for that matter), and Color Oracle, which changes your screen to mimic how a color-blind person would view it. The timeline itself is a simple HTML table, with a little gradient image on top I made in Photoshop. Apparently you can do the same thing in CSS, but it's not supported in all versions of IE. Shucks.
Komen's Contortions
In the days after news broke that the Komen Foundation had defunded Planned Parenthood, the foundation's public statements explaining its motivations for the move kept changing, often in contradictory ways. We wanted to lay out all of the statements in a simple, straightforward chronology.
We knew from the beginning that this project was going to involve a lot of text just to explain and link all the events together. At first we put everything in a single document, interspersing quotes from various officials within the text as they came up. But we ended up with paragraph after paragraph of text that looked the same, and it was hard to compare quotes and statements since they were randomly scattered throughout the story. We tried making the quotes italic, which was slightly better but still didn't allow for easy comparisons. To really highlight the contradictions between what happened and what was said, we had to set them apart. So we split the page in half, and paired the statements and the events vertically. I think it's pretty intuitive -- although it's the opposite of how Facebook orders its timeline.
Getting both sides to line up proved to be more difficult than I originally thought. I got everything onto its appropriate left or right side, and even learned how to make a fake "line" down the middle by repeating a tiny 1px background image. But I couldn't get the quotes to line up with the paragraphs of text on the opposite side because the line heights of the text were slightly different. I finally ended up putting each date and subhead into its own div, and giving it a padding-left of 330px, which effectively pushed the corresponding quote down into its appropriate spot.
We ended up using this same template for a timeline on the Obama administration's crackdown on government leaks. In that case, rather than quotes, we put photos on the left hand side.
Some Last Thoughts
Another aspect of how these timelines work involves the "near" and the "far." We think of our visualizations and news apps as having a near view and having a far view. In my head I think of these as the "at-a-glance" and the "up-close-and-personal" view, but in any case, the former gives you the overall picture, and the latter gives you the details. In the Red Cross timeline, for example, the color-coded labels are the far view -- they tell you some bit of info even if you spend three seconds with the timeline. On the other hand, the embedded notes and links to the actual documents are the near view -- they tell you much more if you are invested and want to dig in.
