HOME
          
LATEST STORY
Ken Doctor: Why The New York Times hired Kinsey Wilson
ABOUT                    SUBSCRIBE
July 30, 2013, 10:38 a.m.

How to turn everyone in your newsroom into a graphics editor

A newly open-sourced tool from Quartz makes it easy for newsrooms to build quick, attractive charts from datasets on deadline.

Editor’s note: Back in May, I noted this Quora discussion on how Quartz creates visualizations — charts, mostly — of data so quickly off the news cycle. The answer involved an in-house tool that made it relatively simple to turn a data set into a chart that fit Quartz’ visual aesthetic.

I was very happy, when tweeting with that tool’s creator, David Yanofsky, to learn that Quartz planned on open-sourcing the tool. It’s built on the amazing D3.js — built by The New York Times’ Mike Bostock — which is immensely powerful but also features a learning curve that’s proven a bit too steep for me. Today, that tool, Chartbuilder, is available for your use. (Here’s a chart of Apple’s stock price since May 3 that I made in about three minutes.)

Today Quartz is open-sourcing the code behind Chartbuilder, the application we use to make most of our charts. Along with the underlying charting library — called Gneisschart — the tool has given everyone in our worldwide newsroom 24-hour access to simple charts at graphics-desk quality. It has helped all of our reporters and editors become more responsible for their own content and less dependent on others with specialized graphics skills.

The rise of Chartbuilder

The project started as a tool for myself. Dismayed by some of the ugly, poorly cropped, off-brand, and illegible charts showing up on Quartz and frustrated by the amount of my own time it was taking to produce even the simplest charts in our style, I set out to make a tool that would allow me to support the charting needs of the newsroom without consuming all of my time. It quickly turned into an application for the entire newsroom.

Here are some charts that were made by our reporters with the tool:

chartbuilder-example-1

chartbuilder-example-2

chartbuilder-example-3

chartbuilder-example-4

chartbuilder-example-5

Chartbuilder is a completely front-end application: no specialized servers required. Gneisschart, the part of the software that actually draws the charts (instead of controlling them), utilizes the all-but-industry-standard visualization library D3.js.

Creating a method for charting in the newsroom is not a new problem. Paul Krugman lamented his own chart workflow in 2009. And we’ve all worked in newsrooms where the graphics desk is overloaded with small requests.

Quartz does not have a graphics desk. We have the Things team. As an establishing principle, this team of multidisciplinary and multiplatform journalists is no more a service to our newsroom than our well-sourced reporters. The Things team is just as responsible for reporting news and originating content as everyone else. Making other people’s charts slows us down. But given the right tool, helping out a colleague is a trivial exercise.

Chartbuilder has allowed us to scale the Things Team’s capacity exponentially, allowing our site to benefit immeasurably. Visually, now, all of our content shines, not just the bits that fit neatly into our CMS. Chartbuilder helped our digital newsroom reclaim some of the design consistency that remains a staple of print publications.

Of course, getting our staff onboard and using Chartbuilder was not an overnight process. But with the aid of our most chart-reliant reporters, we quickly got everyone trained and using Chartbuilder with a 30-minute demonstration followed by one-on-one troubleshooting as problems arose.

The principles of Chartbuilder

Chart builder was created to lower the barrier for non-technical and less-designerly journalists to create charts. With that in mind, the tool is built around these organizing principles:

Immediate visual feedback for every user interaction

Immediate visual feedback is one of the biggest reasons Chartbuilder has been successful internally. A reporter who isn’t quite sure they’re doing it right can feel around with the tool, and know whether she made the right change — not after clicking an update button, not after a momentary delay. They’ll see it as soon as they lift up the key they pressed.

Speed wins

News moves fast. If a tool is slow, reporters wont use it. This principle is only slightly about the speed at which the actual code runs and primarily about the time it takes a user to show up at the tool, make a chart, and leave. With proper data, this should take less than 30 seconds.

Styling must be flexible enough for any setup, but opinionated enough to keep style consistent

Charts made with Chartbuilder, because they’re built through D3.js and styled with CSS, are easy to customize. At Quartz, we’ve loaded in our extended color palette, set the default order in which those colors should be used (bright pink first!), loaded in our fonts, and made the type and stroke weights large enough so that they’re still reasonably legible when viewed on mobile devices.

Output formats just work, and are easy to use

A reporter’s understanding of an image file is exponentially higher than a reporter’s understanding of an iframe embed code snippet. Content management systems’ understanding of an image file is exponentially higher than a CMS’s understanding of an iframe embed.

No connection, no problem

With reporters around the world and many often on the road, the ability to use Chartbuilder without an internet connection can be quite useful. If you download the source code from GitHub, you can use the tool offline. Enhancements will be made to take advantage of newer HTML technologies and preempt the requirement to download.

Chartbuilder in your newsroom

Reporters

The day-to-day use of Chartbuilder can enhance your stories where previous limitations prevented it. No longer do you need to wait for a production team to create your content. Your charts will look professional and will blend into the aesthetic of the rest of your site. Of course, you’ll need to set up the styles of Chartbuilder to match your publication’s, so you might need some help.

Graphics desk

Chartbuilder will make you sane again. You can stop copying and pasting charts into Illustrator from Excel and taking five minutes to resize and restyle it. After dumping the data into Chartbuilder, you can export as an SVG, open that in Illustrator, and edit away. If you’re not up on CSS, ask your web-comfortable friends to help you get the style to match your publication’s guide.

Dev team

Not only will Chartbuilder get the web editors off your back about building a charting tool into the CMS, but it also requires very little work to set up. You don’t need to stand up a back-end that renders chart images or stores arbitrary amounts and formats of data. Download the source, get a designer to update the styles, and host it on some internal web server.

Chartbuilder and Gneisschart are now available on Github. We look forward to charting the way forward with you.

POSTED     July 30, 2013, 10:38 a.m.
SHARE THIS STORY
   
Show comments  
Show tags
 
Join the 15,000 who get the freshest future-of-journalism news in our daily email.
Ken Doctor: Why The New York Times hired Kinsey Wilson
The former chief content officer at NPR will be moving up I-95 to one of the most important digital positions at the Times.
Why Google is taking another shot at helping readers pay for news
Google Contributor is the latest tool the company has designed to help readers pay for what they read online. But its previous experiments in supporting paid content have had limited success.
In Canada, newspapers’ attempts to experiment with ebooks haven’t seen much success
A number of papers across the country started ebook programs in the early part of this decade, repurposing their archives or producing new work. They haven’t been the moneymakers some had hoped.
What to read next
718
tweets
Ken Doctor: The New York Times’ financials show the transition to digital accelerating
The numbers may look flat, but they contain a continuing set of ups and downs. Up next: executing on a year’s worth of launches.
540Here’s some remarkable new data on the power of chat apps like WhatsApp for sharing news stories
At least in certain contexts, WhatsApp is a truly major traffic driver — bigger even than Facebook. Should there be a WhatsApp button on your news site?
502Controlled chaos: As journalism and documentary film converge in digital, what lessons can they share?
Old and new media types from journalism, documentary, and technology backgrounds gathered at MIT to share practices and discuss mutual concerns.
These stories are our most popular on Twitter over the past 30 days.
See all our most recent pieces ➚
Encyclo is our encyclopedia of the future of news, chronicling the key players in journalism’s evolution.
Here are a few of the entries you’ll find in Encyclo.   Get the full Encyclo ➚
San Diego News Network
AOL
NBCNews.com
Neighborlogs
The Washington Post
The UpTake
Quora
The Atlantic
The Chronicle of Higher Education
Houston Chronicle
Slate
Spot.Us