View Source” for Data Visualizations

How (and why) we made a browser extension for annotating data viz

A mock-up of our hopes for future annotation display

During the most recent SNDMakes design-sprint and prototyping event, teams were prompted to think about how they might expand the news and information design communities. For our team, it was a hard ask, because not only are those two separate communities, but they’re communities that don’t necessarily interact, even when they share a common goal. As though to illustrate the divide, when the ONA and IEEE Vis conferences were held at the same time in the same hotel in 2013, there was almost no dialogue between the two groups.

Our team hoped to expand the news and information design communities by giving them a common project for fostering collaboration. Increasing shared knowledge about techniques, methods, and editorial decisions made around news graphics seemed like a good way to get people talking publicly about good standards, and would hopefully make both communities stronger and more united.

Meet V³

the browser plugin in edit mode

The Chrome plugin in action, adding annotations to an election results project

Visualization Verification View (V³) was the product of this concept. Think of it as a “view source” for data visualizations, a universal documentation layer on top of any news graphics page that can be written by the author, then commented on by others in the community.

We implemented it as a Chrome extension that those interested in writing and reviewing documentation could install in their browser. The extension also writes to a database that stores all annotations so that they can be displayed on a single site that links to all graphics documented within the system.

Documentation First, Last, and Always

The Chrome extension was our way of trying to subvert the need for an organization to install anything in their CMS, though ideally a documentation tool could be used from the beginning of the graphic-making process, not just at the very end.

That’s why our team also made a spec for documentation, providing a set of clear questions and parameters for authors to respond to. We built the spec to answer questions our team members had about news graphics, including data provenance, how those data sets were chosen, the choice of visualization style, and the programs used to create the visualization. We hope it will also allow makers to think more critically about the graphics they are creating.

Let’s Make It Real

The SNDMakes design sprint was only 72 hours, so we “only” finished making the documentation spec, the API and Rails app for annotation intake, and the annotation view, but we’d like to see this become real, in one implementation or another.

Ultimately, a tool like V³ could have benefits not only for the community at large, but also within organizations, where institutional knowledge is difficult to maintain with turnover. We’d be happy to have others hack on what we’ve already created by visiting our repositories for the Chrome extension and the Rails app.



  • Allison McCartney

    Allison is a news applications developer at ProPublica where she’s helping to build Represent, a web-application for Congress data. Before that, she was at the Stanford branch of the Brown Institute for Media Innovation, and has previously worked at CIR/Reveal and the PBS NewsHour. She has her masters’ degree in journalism from Stanford, and a degree in Middle Eastern Studies and Art from Washington University in St. Louis. Allison lives in San Francisco where she rides a Vespa, plays with other people’s dogs in Precita Park, and has strong opinions about the best Mission District taquerias.


Current page