NPR Visuals

Apply NOW for a spring internship with NPR Visuals

Do you design? Develop? Make pictures? Love the web? We'd love to hear from you!

by Brian Boyer, October 26, 2014

How to Setup the NPR App Template for You and Your News Org

Want to use NPR's app template? Start here and learn how to create a fork of the project that you can use for all your future projects.

by Tyler Fisher, September 08, 2014

A reusable data processing workflow

How NPR Visuals processed data from the Law Enforcement Support Office.

by David Eads, September 02, 2014

Work In Public! (Or, why you really should consider being NPR's Knight-Mozilla fellow!)

This is gonna be fun.

by Brian Boyer, August 07, 2014

Everything our app template does: July 2014 edition

A comprehensive update on everything our app template does in July 2014.

by Tyler Fisher, July 29, 2014

Be our fall intern!

Do you design? Develop? Love the web? Love democracy? Want to spend this fall in Washington, DC?

by Brian Boyer, June 26, 2014

How we work

A visuals team manifesto.

by Brian Boyer, June 04, 2014

Published At Source (source.opennews.org)

All About The Dailygraphics Rig From NPR

A Q&A with Alyson Hurt and Christopher Groskopf (external link)

by Christopher Groskopf, Alyson Hurt and Erin Kissane, June 03, 2014

Managing Instagram Photo Call-Outs

How to collect, moderate and output the results of an Instagram photo call-out using IFTTT, Google Spreadsheets and our dailygraphics system.

by Emily Bogle and Alyson Hurt, May 29, 2014

Creating And Deploying Small-Scale Projects

Our dailygraphics rig offers a fairly lightweight system for developing and deploying small chunks of code-based content, with some useful extras like support for Google Spreadsheets and responsive brs.

by Alyson Hurt, May 27, 2014

Responsive Charts With D3 And Pym.js

One strategy: Destroy and redraw the graphic based on its container's dimensions every time the page resizes. Also, learn how to make this work in a responsive br with Pym.js.

by Alyson Hurt, May 19, 2014

Making Data Tables Responsive

One strategy: Shift from columns of data to rows at small screens. Also, learn how to make this work in a responsive br with Pym.js and pull data from a Google Spreadsheet using copytext.py.

by Alyson Hurt, May 09, 2014

How We Built Borderland Out Of A Spreadsheet

Using copytext, a Google Spreadsheet and Jinja2 templates, we built Borderland in a modular and repeatable way.

by Tyler Fisher, April 23, 2014

Introducing copytext.py: your words are data too

Is your writing all mixed up with your code? Copytext.py gives editorial control back to reporters and editors.

by Christopher Groskopf, April 21, 2014

Published At Source (source.opennews.org)

Introducing Pym.js

NPR’s Visuals team breaks down Pym, a new responsive-br library and the first project launched from the OpenNews Code Convening. (external link)

by Jeremy Bowers and Alyson Hurt, April 15, 2014

We're hiring a picture editor

Love photography? Obsessed with the web? We've got a job for you.

by Brian Boyer, February 20, 2014

Published At Source (source.opennews.org)

Making Remote Work Work

Tips and tricks for being an effective remote developer. (external link)

by Christopher Groskopf, February 13, 2014

Animation With Filmstrips

For the Planet Money T-Shirt project, we experimented with an alternative to animated GIFs.

by Alyson Hurt, January 08, 2014

We're hiring a web developer

Love to code? Want to use your skills to make the world a better place? We've got a job for you.

by Brian Boyer, January 06, 2014

Published At Source (source.opennews.org)

How And Why Cross-Disciplinary Collaboration Rocks

Case Study: The UX process behind the 'Planet Money Makes A T-Shirt' project, written for Source. (external link)

by Wes Lindamood, January 02, 2014

The Book Concierge: Bringing Together Two Teams, Nine Reporters, And Over 200 Books

The code, process and problems of going beyond lists for NPR's year-end books coverage.

by Shelly Tan, December 10, 2013

Published At Source (source.opennews.org)

Collaborating On The T-Shirt Project

Interview: Brian Boyer talks with Source about the Planet Money / NPR Visuals project 'Planet Money Makes A T-Shirt.' (external link)

by Brian Boyer, December 02, 2013

Published At Source (source.opennews.org)

How We Made Lobbying Missouri

The design process and code behind the NPR / St. Louis Public Radio campaign finance project. (external link)

by Danny DeBelius, Christopher Groskopf, Erin Kissane and Matt Stiles, November 12, 2013

Published At Source (source.opennews.org)

Network Diagrams Are Hard

It's a challenge to make legible, useful, responsive network diagrams. (external link)

by Alyson Hurt, November 03, 2013

Complex But Not Dynamic: Using A Static Site To Crowdsource Playgrounds

You can build and deploy complex sites without running servers. Here's how.

by Jeremy Bowers, September 13, 2013

How to Setup Your Mac to Develop News Applications Like We Do

(Almost) everything you always wanted to know about working from the command line, but were too afraid to ask.

by Gerald Rich, June 06, 2013

User-generated graphics in the browser with SVG

How we used SVG to generate shareable, high-resolution and print-friendly graphics directly in our user's browsers.

by Christopher Groskopf, May 31, 2013

How to build a news app that never goes down and costs you practically nothing

Spoiler: Our app template makes it possible.

by Katie Zhu, February 14, 2013

We're looking for teammates!

Do you want to make the world a better place? Are you a designer or developer or designer-developer or ux-ui or hacker-journalist? (We love hyphens!) Well, have we got a job for you.

by Brian Boyer, December 04, 2012

Published At Source (source.opennews.org)

How NPR Designed Their Live Elections News App

Case Study: The design process for 'Electris' from concept to election night, written for Source. (external link)

by Alyson Hurt, November 23, 2012

Our first news apps: Tracking weather and elections

We've been working together as a team for about four months now, with most of our work focused on the presidential campaign and this week’s elections. Here’s a rundown of some of our favorites.

by Matt Stiles, November 21, 2012

Election 2012: Electoral combinations

Early in the development of the Swing State Scorecard we determined that we wanted to tell a story about how many combinations (2-state, 3-state) of tossup states there are which would win the election for Obama or Romney.

by Christopher Groskopf, November 13, 2012

Hello world: Nerd blogging with Jekyll

We're a new team, and we're trying something new (at least for us) as a blog publishing platform: Jekyll, a generator that creates simple, static websites.

We're not breaking any ground with this choice, of course, but we liked the idea of launching a blog that's open source — both its code and also its content.

This initial post is an introduction to Jekyll for the members of our team -- and anyone else who wants to get started with the tool and/or steal our simple code for their own site.

by Matt Stiles, November 08, 2012