Let’s build together — NZZ’s storytelling toolbox Q is now open source

Hello World

David Bauer
Mar 20, 2017 · 5 min read

Quick links:

What is Q?

Q is a browser-based toolbox that allows reporters and editors to create simple graphics and interactive elements for their stories. NZZ Storytelling built it for Neue Zürcher Zeitung’s newsroom where it’s widely used. For its first anniversary, we wrote an article on why newsrooms need storytelling tools and what we’ve learnt building them.

How is Q different from other tools?

First and foremost, it’s not a tool, but a toolbox. It’s built to be a single point of access for all sorts of tools and all content that is produced with them. Here are some key features:

  • Simple user interface and workflows, designed for people with no specific expertise in data visualisation, to facilitate broad usage in newsrooms.
  • The same workflow from creation to publication for all tools, making it easy for users to understand new tools.
  • Searchable archive of all items created with any of the tools, so that everything can be easily re-used, edited and used as blueprints.
  • The same item can be rendered in different ways and designs for different targets (server side rendered, client side rendered, raster image, svg, you name it)
  • The data for the graphics is stored in a database and rendered on runtime (with heavy caching), making sure you always have the latest version everywhere it’s embedded, with no additional effort.
  • Q server, Q editor and tool services are decoupled and communicate via HTTP. This allows you to use whatever technologies fit your needs best.
  • Tools define the editor form using JSON schema with some extensions, making it very easy to set up new tools.

What’s included?

For now, it’s the Q server, the Q editor and a small number of tools. We’re not yet ready to open-source all tools we use at NZZ, but some will certainly follow (more on that below). The tools currently available are:

  • Election results: Votes for people
  • Election results: Votes for parties
  • Election results: Seats won by parties

You know what, can I just have a look?

Sure. We’ve set up a public instance for you to play around. Please be aware: Whatever you create there is not meant to be used on public-facing websites. We’re cleaning the database every other week. Feel free to copy the embed code in a website for testing purposes. This will use a basic Q loader that is running in the browser to fetch graphics from the demo server.

That sounds interesting. Can I start using it?

Well, yes. And no. There’s a little work to be done on your side. We don’t currently offer Q as a hosted service (if you’re interested in this, get in touch).

If you want to set up your own instance of the Q system please read our documentation. We hope that this will help you to get Q up and running (we’ll add more detail to the documentation as soon as we can –promised)

What license is it released under?


I tried and it doesn’t work. Help!

If you have feedback regarding the documentation or encounter a bug, feel free to open an issue or send a pull request on Github in the respective project (editor repo, server repo). Currently we have 2 hours per week of developer time dedicated to help out with any issues.

I have an idea for a new feature!

You are welcome to open an issue on Github.

Why are you open-sourcing the toolbox?

First, we believe in the power of open source to make software better, not least for our own benefit. By allowing others to have a look at our code and build on it, we will learn about weaknesses and discover new potential. And if we’re lucky, others will build useful features before we get around to build them. And irrespective of what will happen next, we’ve learned a lot in the process of making the software ready to be open-sourced. Q has already become a lot better than it was before we decided to open-source it.

Secondly, we’re standing on the shoulders of giants ourselves. We use a lot of open-source software for our work and appreciate all the effort that has gone into it. So just as open-source software built by others has made our lives easier and our work better, we’d like to contribute what we can to give others something to build on.

What’s next?

We have several more tools that we currently use at NZZ that are not quite ready for open-sourcing (you can get a glimpse at those tools in this article). One that will follow quite soon is pointer maps, which will be released under the MIT license and which you will find in the demo instance as soon as it’s ready. What’s more, we have a bunch of concepts for additional tools ready to be implemented, as well as new features and improvements to Q as a platform. You’ll certainly see some of those open-sourced sometime in the future.

Can we meet?

Get in touch with us at storytelling@nzz.ch or @nzzstorytelling so we can figure something out.

Also, Beni Buess, Q’s lead developer, will be in Perugia for the Journalism Festival from April 5th to 9th. If you want to meet him there, get in touch with him via Twitter or by sending him an email to beni.buess@nzz.ch.

Like what you saw here?

Please share this article with anyone you think might be interested. Thank you.

NZZ Open

A place where we explain how we build things.

Thanks to John Burn-Murdoch

David Bauer

Written by

Journalist. Head of Visuals at NZZ. www.nzz.ch/visuals. Maker of other things: www.davidbauer.ch

NZZ Open

NZZ Open

A place where we explain how we build things.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade