The Thinking Behind WNYC’s Vertical Timeline
By John Keefe, WNYC
Making a music stand, my father said, was a great challenge: Even though people had made them for centuries, it was still possible to blend beauty and function in a new way.
In journalism, the same is true for the timeline.
Presenting a chronological story online, beautifully and functionally, has been tricky. There are some great examples, such as the New York Times’ chronology of the Iraq war, and the three-dimensional Middle East timeline from The Guardian.
ProPublica built the excellent TimelineSetter to put Times-like timelines in the hands of non-Times journalists, and we used it for a while. But TimelineSetter’s horizontal layout got cramped in WNYC’s article columns, and we longed for something that fit better.
We also decided to dispense with a journalistic convention that represented temporal gaps visually — making months wider than weeks, for example — and focus, instead, on seeing the sequence of events at once.
We also went with a center-spine orientation, which give it balance and allows the user to see more items at the same time. And the very cool Isotope code reshuffles the items to fit as they are closed, opened, resorted or even added.
Open to use
Finally we wanted it easy for us — and you — to use. So we wired it to Google Spreadsheets, allowing reporters and editors to easily enter and update the information. The wiring there is based on a previous project of ours called Tabletop.js.
We usually build an HTML page just like the one in the code example, and then use a simple line of HTML to iframe it onto an article page. The only trick is to make sure the iframe is tall enough.
The code is free for non-commercial use; commercial use requires a $25 license fee for Isotope.
We hope folks will use the timeline, and come up with improvements.