Twitter  Q&A with David Leonhardt: Learn more about how The Upshot plans to integrate with the newsroom at The New York Times nie.mn/1rldymo  
Nieman Journalism Lab
Pushing to the future of journalism — A project of the Nieman Foundation at Harvard

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.

                                   
What to read next
Leonhardt
Caroline O'Donovan    April 23, 2014
“Is there a way to take some of the knowledge that people at The New York Times already have that ends up on the cutting room floor, and put it in front of readers?”
  • Keith Weston

    Thanks for this article for this extremely useful and elegant tool. Very helpful indeed.

  • http://twitter.com/andrewphelps Andrew Phelps

    This is great.

  • dbrower

    Dear Editor, is there some significance to 413 and 447 in your example chart? Either there is, or they are chartjunk.

  • ajaquith

    Beautiful! I have never found a chart library I liked — because the defaults all need to be heavily massaged until the results look good. It’s terrific to see the release a tool with taste. Many thanks for open-sourcing this.

  • http://ldopa.net/ Jeff Hobbs

    Fantastic! This is what open-source is all about. A rising tide lifts all boats.

  • Liberal Hater

    Because reporters should do graphic design and not learn how to report stories properly….

  • http://thecreativetechnologist.com/ Anthony Garone

    This is really, really great! Just what I have been looking for: a simple way to build charts without writing any code. It allows me to focus exclusively on getting the data I need into the appropriate format. Thanks for releasing this… totally made my day.

  • DanJHarrington

    The axis not starting at 0 is more of a concern for me(!) This is a nice article and thanks for sharing, but the example chart reminds us that the best software doesn’t stop people from making charts that are misleading.

  • David Yanofsky

    The point of this tool is to make sure reporters don’t need to “do” graphic design to make something that looks professional.

    As it stands now, reputable publications allow ugly and illegible charts on their websites because there isn’t enough capacity on the graphics desk to make them look good. Chartbuilder is one solution to this problem.

  • Claudia Timmons

    Have you ever tried the tool Infogr.am? We’ve used it few times to make
    quick charts for our web articles. Here’s an example (in french) :
    http://blogues.radio-canada.ca/rive-sud/2012/12/05/depot-budget-longueuil/ Good look. Easy to learn.

  • sibanez

    Great app, especially friendly for newsrooms! Really hope this helps eradicate the plague of pixelated info graphics on news sites.

  • http://www.swatkhan.com/ Swat Khan

    Thank you for sharing. This is a useful tool.