Footnotes on the State of the Union

Posted Thursday, January 28, 2010 at 10:51 p.m. by Chris Amico in Lessons From... and Projects about Django, journalism, politics and Python

Last night the NewsHour went all-in covering State of the Union. We had on-air analysis, video from the Capitol and coverage on our new blog, and a new app to annotate the speech as it happened.

The Analyzer (I can never think of clever names for my apps; this is what everyone here calls it) is built in Django, with a lot of help from jQuery. From pitch to launch took exactly a week, including a working weekend.

The app is built around two main models: Speeches and footnotes. Every footnote is tied to a speech and indexed to a paragraph in the text. (There are a couple other models that are more peripheral.) I borrowed a lot conceptually from the paragraph-level commenting on NewsMixer and the Django Book, and from the slick inline footnotes in this essay by Jacob Kaplan-Moss (which you should read). I've also been thinking of the right way to do paragraph-level permalinks like Dave Winer does on his blog for a while.

A combination of BeautifulSoup and jQuery add in id attributes on each <p> tag, then add links to footnotes in hidden <div> blocks. The lightbox is a pretty straightforward Fancybox implementation.

(In case you're wondering, yes, I could have done both links and ids in either Python or JavaScript. The main reason I didn't is that the links change, so JavaScript picks that up faster, while the ids don't, so I did that server side. I'm still not certain this is ideal.)

On the editorial side, the app hits a NewsHour sweet spot: The show's core competency is finding interesting people to talk about interesting things. The broadcast loves nothing more than three wonkish experts sitting around a table going back and forth on an issue for 15 minutes. We wanted to bring that kind of analysis to the State of the Union in a granular and compelling way.

When we pitched the idea, I figured getting three people from the politics beat adding background notes would be a good baseline. Five, cool. If we get 10, what are we going to do with all these people?

Somewhere in the course of selling this to higher ups, everyone bought in. An email went out Monday for every beat to start booking experts. By Wednesday morning, we had 27 lined up (including the NewsHour's senior correspondents). It ended up being a full team play, and much the better for it.

I'd originally planned to have those outside experts put footnotes in the database themselves, but the interface wasn't ready and I didn't want to spend all night playing tech support. Our experts emailed the reporters who'd booked them, who then copy-edited and posted responses.

With the speech running from 9 to 10:15 p.m., most of our (officially former) online staff stayed well past midnight updating the speech. The last two left at 4 a.m.

Where to improve it

Our designer and I came in this morning talking about what we want to add to the analyzer. Here's a quick list:

  • Footnotes by author: With so many contributors, we need an easy way to choose one and see everything they added.
  • Permalinks: I kept wanting to tweet out individual footnotes, but without a permalink structure, there's no good way to do it. For now, I can link to a paragraph, but I can't make a footnote open based on the URL.
  • Interface cleanup: We didn't get everything we wanted in this version. The next iteration will be smoother and, hopefully, faster.

Lessons learned

This experiment worked, in my mind, because it used to technology (Django in this case) to organize journalism, to create order and make information usable and accessible.

One of the great strengths of Django as a framework is that the technology can disappear and let the journalism shine through.

Update 1/30 at 7:15 p.m.: One more thing I could do to make this thing run smoother: Ajaxify loading in the lightbox. Fancybox supports Ajax, so I could put footnotes in a separate view, then call up only what's needed. That should save the page from having to load all that video in hidden <div>s.


jan 29, 2010 at 12:20 a.m. // Rick Martin said:

This project kind of reminds me of Apture ( in how it supplements text content with related links. Not too similar, but in similar ballparks.

jan 29, 2010 at 9:57 a.m. // Chris Amico said:

We looked at Apture, and briefly at Google Wave. They both moved in the direction we wanted to go but didn't get all the way.

Apture is great for adding context using what's already out on the web. Had we just wanted to link up the speech to our archives, or to other news reports, it probably would have been enough. But a big part of our goal was getting original expert commentary up the night of the speech, and I don't think Apture would have worked for that. We also worried that it would look too much like automated inline text ads, and that bugged us.

Wave felt too gimmicky. Plus we weren't certain our experts would be able to use it during and after the speech (not knowing who's signed up, and who'd want to be). Also, it's huge, heavy and a potential browser-crasher.

Comments are closed for this post. If you still have something to say, please email me.