One of my favorite things about how the news industry has evolved over the last couple of years is that in-house graphics teams have shown an incredible commitment to open-sourcing their projects and tooling. These projects run the gamut from charting applications and frameworks, to social media image generation tools, to tooling that brings the power of desktop GUI graphics editors to the web.
I think these open-source projects have the untapped potential to really change how communications teams at non-profits and advocacy organizations do their digital work.
Here are some thoughts (or maybe it's more of a map) on the current landscape of open-source news applications, and how non-profits can integrate these tools into their workflows and leverage them to improve their digital communications.
Most of the web-based GUI charting tools out there are wrappers for reusable D3.js templates. I think GUIs are powerful and necessary in the charting space. They allow non-technical editors, reporters, or NGO program staff to create accessible, interactive, web-native charts without much guidance from a programmer or graphics editor. The most powerful tools in this space are ones that combine a GUI with the optional ability to edit chart code directly. For more on this, see Gregor Aisch's post: Seven Features You'll Want In Your Next Charting Tool.
Datawrapper is one of the first and best web-based GUI charting applications out there. Datawrapper is a for-profit company, but the core of the tool is completely open source. For organizations that require custom branding, the hosted version is pricey (around $230/month for custom branding and fonts).
The open-source core does a bunch of things really well, but the paid version is much better—it has a bunch of really nice chart and map types that the company hasn't open-sourced. Fortunately, with a bit of customization, it's possible to get around these limitations.
I set up the open-source version of Datawrapper for WOLA last year, and we've been using it ever since. Some of our best publications use Datawrapper charts to great effect.
Setting Datawrapper up involved a lot of trial and error. The setup instructions on the Datawrapper wiki are sparse, but fortunately Greg Linch over at McClatchy published a really detailed post documenting his installation process.
A couple of things you'll probably want to do that Greg doesn't cover:
- Create a custom theme with default colors/fonts for your organization.
- Extend the default (and now deprecated) mapping plugin by creating map templates for other regions—for us this was Latin America and Central America.
- If Datawrapper's built-in export options don't work (they didn't for me), try Rubens Fernando's publish-embed plugin: https://github.com/rubensfernando/publish-embed.
Another good one is Quartz's Chartbuilder. It runs completely on the front end, so you can host it statically with something like S3 or another comparable service, and you don't need a database or backend chops to host charts. Here's an example of a Chartbuilder instance I set up with custom branding, which we very occasionally used at WOLA.
The downside of this approach is that all of your exports will be static (either images or SVGs) and they won't be accessible to screen readers or search bots.
Chartwerk is a relatively new charting system from the Dallas Morning News. I haven't seen much written about it and haven't set it up yet. From what I can tell, it's a nice interface for non-coders to easily create interactive and static charts, and it also combines the ability for graphics editors or coders to edit chart code directly. The backend is built on Django and the frontend is a React app.
Generators and rigs
I think NPR’s rig has the potential to be powerful and efficient, but it also requires significant investment for setup and maintenance. I also don’t think it’s as easy as it could be to onboard new developers to the workflow, and it leaves non-technical staff completely in the cold.
Social Media Graphics
Cardkit is an open source browser-based image creation tool released by The Sunday Times, which I customized and installed for WOLA back in August of 2016. Cardkit makes it really easy for non-technical users to create text cards for social media, as well as caption and watermark images. It was originally created by the Sunday Times, and is written in Angular. Since we started using Cardkit, our social media engagement has skyrocketed, and image cards are some of our most retweeted content. I also added the ability to clear the canvas, resize an attached image, and add a video "play" icon. This is really useful when we send emails to our mailing list with video screenshots, since you can't embed actual videos in email.
Cardkit was relatively easy to install, but customizing it with WOLA's branding was a bit of a challenge in version 1 of the tool. Cardkit v1 used Angular, but v2 is built on React, which I like a lot more. It also comes with a nifty Yeoman generator for customizing new installations.
Lunchbox is a similar tool created by NPR.
Tools for Working with Congress and Congressional Data
Often times non-profits want to mobilize their supporters to call their Congressional representatives in support of or in opposition to particular issues (even though there’s a lot of debate as to whether this accomplishes anything). Rather than sending people to a list of phone numbers or have them call the central switchboard, there are open-source tools available to give people a script and easily help them find their representative’s contact info.
For working with Congressional data, here’s a list of the best resources I’ve come across:
- ProPublica Congress API: one of the best API’s out there for getting Congressional data, including votes, members, bills, nominations, etc.
- ProPublica Staffers: an interactive and searchable House staffer directory
- ProPublica StateFace: a typeface of U.S. state shapes to use in web apps
- congress-legislators by @unitedstates: structured data for all members of the United States Congress, 1789-present
- images by @unitedstates: public domain photos of Members of the United States Congress
- districts by @unitedstates: GeoJSON and other shape files for the federal legislative districts of the US
Storing Knowledge with a Good Wiki
This is a hard one. Open-source knowledge sharing tools exist, but I do feel that paid options are often better. One of the best paid services I've seen is Notion, which combines a bunch of different tools—calendar, task management, wiki, project tracking, and even lightweight spreadsheet/CRM capabilities—into one app.
At WOLA, we used an old and deprecated version of Tiddlywiki, stored on a local fileserver. I upgraded it to a newer version of Tiddlywiki and put it onto a Node.js server behind some basic authentication on a subdomain, so that people could access it outside of the office. Usage has gone way up. I wrote about that process here.