This is one of a series of blog posts from the fourth ONA class of MJ Bear Fellows, three journalists under 30 who are expanding the boundaries of digital news. Fellow Aaron Williams is data visualization editor at the San Francisco Chronicle. Apply for the 2015 fellowship here.
Since the Online News Association’s 2014 Conference & Awards Banquet, I’ve been thinking a lot about how to better integrate newsroom workflows into creating and publishing digital graphics. Many newsroom developers juggle copy from reporters, editors and the copydesk, often forgetting key text, while also working on design and code. In other words, collaborating on interactive graphics is a challenge. Here’s a quick look at solutions from other newsrooms, as well as a technique I’ve developed in my former role at The Center for Investigative Reporting (CIR).
Google Drive as the CMS
Google Sheets is a common tool for powering digital news graphics. While a spreadsheet can’t fully replace a database, it can mimic some of its key characteristics: columns, rows and headers. This provides an easy way for web producers and reporters to add content to a graphic while newsroom developers can focus on the code.
An example interactive map built with Mother Jones’ Story Tools. Source: https://github.com/motherjones/us-color-coded-map
Mother Jones has built an array of graphic tools powered by Google Sheets called Story Tools. The suite covers many use cases including quizzes, interactive maps and even a “Choose Your Own Adventure” explainer. This setup still requires some basic coding knowledge, but it’s pretty plug-and-play once setup is complete.
If you need a more custom approach, NPR’s Visual Team has you covered. They open source much of their code to give other newsrooms tools to create compelling digital work. Most notable is Dailygraphics, a Python-backed web application using Google Sheets, powered by NPR’s copytext Python library, to create regular digital graphics like charts, tables, before-and-after sliders and audio interactives. Dailygraphics requires some coding knowledge, but provide newsrooms with a great starting point for building collaborative digital news graphics.
Using Google Docs
Example archieML markup. The result: Bait and Switch, a Common Ploy of Patriots and Seahawks. Source: http://archieml.org/
Lastly, at the Computer Assisted Reporting Conference this year, the New York Times released ArchieML, a structured text format (think Markdown or JSON) that helps reporters and editors add content and data to Google Docs. This seems like a more natural fit as many reporters draft and edit stories in Google Docs, since adding copy to a spreadsheet can be unwieldy. ArchieML has the potential to really make graphics editing as quick and painless as stories.
Django for graphics publishing
While the above approaches meet many newsrooms where they are, they don’t always integrate into existing workflows. Furthermore, a newsroom developer may want more control for building projects that use many data sources or require some analysis before publishing. For these tasks, I’ve used Django, a popular Python web framework used by many newsrooms including CIR, The Los Angeles Times and the Chicago Tribune.
For my most recent graphic at CIR, I decided to see how I could use Django to give the reporters a simple CMS for adding copy and assets. With this approach, we created a simple timeline on eBay’s policy toward gun sales.
A simple timeline on eBay’s policy toward gun sales. The graphic used Django as a CMS for adding headlines and copy.
Django provides an admin interface to manage data in your application. With some simple django apps (or plugins), you can easily modify the interface to act as a publishing platform.
As you can see the in screenshot above, you can design a Django project to easily add text to parts of an application. However, you’ll notice the content box doesn’t provide any kind of rich text features, e.g., bold text, italics, images, etc. Often, your colleagues will want these graphics to have some kind of rich text, and fortunately there are several rich text editors available, including TinyMCE, CKEditor and YUI Editor (by Yahoo). I decided to use CKEditor as it’s really feature rich and their team offers good support. There’s a nifty django-ckeditor app you can add to your project to support rich text. Once installed, you can reference the app in your project and your text fields will now go from the dull example in the screenshot above to one your colleagues will recognize.
For me, this allowed for more collaboration on our graphics and we were able to publish our ebay timeline in less than a week. My hope is that the above approaches to news graphic publication inspire others to think about ways we can collaborate on compelling digital content.
Fellow Aaron Williams is data visualization editor at the San Francisco Chronicle, specializing in front-end development, data collection and online graphics. He previously worked as a news applications developer for the Center for Investigative Reporting, as well as The Los Angeles Times entertainment desk as a Web producer where he built tools to optimize and enhance the team workflow. Aaron graduated from San Francisco State University with a bachelor’s degree in journalism.