visuals + news apps

Team Blog

Self-hosted slippy maps, for novices (like me)

How we built our own explorable tile map without paying a fortune.

• by Daniel Wood, Brent Jones, November 26, 2024

How I make news comics

William L. Moore was murdered on a civil rights protest walk. Here's how I made a comic about one man's campaign to create a marker about it.

• by Connie Hanzhang Jin, May 29, 2024

How we used gigabytes of shipping data to show risks to endangered whales

The Rice’s whales’ habitat in the Gulf of Mexico is a thoroughfare of massive, fast-moving ships. Here’s how we analyzed and visualized the potential impact of those ships.

• by Daniel Wood, Nick McMillan and Chiara Eisner, February 12, 2024

Building a beautiful and clear map from massive, complex data

How we made the fire interval return map for our recent project about wildfire risk.

• by Daniel Wood, October 01, 2021

The science of the Science of Joy

How we designed and built NPR's Joy Generator

• by Connie Jin and Thomas Wilburn, August 31, 2021

How we did it: The 2020 general election rig

Redesigning and rewriting the NPR general election platform during an unexpected year.

• by Ruth Talbot, December 30, 2020

Four lessons from a 10,000-mile internship journey

From DC to Texas to Jakarta, Stephanie Adeline takes us through her internship in an age of coronavirus

• by Stephanie Adeline, July 10, 2020

Custom elements in NPR's primary coverage

A new approach to building modular components for our liveblog and election results

• by Thomas Wilburn, March 16, 2020

How I made this graphic: a comic

Creating an animated map of warming waters off the coast of Maine

• by Connie Hanzhang Jin, January 14, 2020

Outside of a dog: Rebuilding the NPR Book Concierge

How we modernized and expanded our book recommendations

• by Thomas Wilburn, December 03, 2019

Flow control: Building accessible video for ‘After the Water’

Here's how we designed large-format video that works for all users

• by Thomas Wilburn, November 19, 2019

How we did it: Heat and income in U.S. cities

Using satellite and census data, along with on-the-ground reporting, to investigate heat in U.S. cities

• by Sean McMinn, September 27, 2019

Retrospective: WBEZ's summer recommendations

Creating a community-driven activity guide

• by Paula Friedrich, July 17, 2019

How we built White Lies

Launching an investigative podcast with our first scrolling narrative

• by Thomas Wilburn, May 17, 2019

Reading between the █████

Building a visual overview of the redacted Mueller report

• by Thomas Wilburn, April 22, 2019

How to setup Windows to develop news apps

What you need to work on our new, Node-based projects

• by Thomas Wilburn, March 21, 2019

Dailygraphics: Updates and upgrades for 2019 and beyond

We're rolling out updated and new versions of our dailygraphics rig.

• by Thomas Wilburn, January 04, 2019

Blue and Red America: How we built it

Some QGIS, some Python and a whole lot of shapefiles

• by Sean McMinn, November 19, 2018

Published by NPR Training (training.npr.org)

Take our playbook: NPR’s guide to building immersive storytelling projects

This post provides an introduction to Hypothesis-Driven Design, an editorial development process we've used at NPR to take a user-centered and evidence based approach to the discovery, design, and development of new storytelling projects. (external link)

• by Wesley Lindamood, June 25, 2018

Pym.js security alert

A high severity security vulnerability has been found in previous versions of Pym.js, please upgrade as soon as possible

• by NPR Visuals Team, February 15, 2018

How we approached data cleaning for our listeners' favorite albums of 2017

Using Makefiles to make reproducible data pipelines

• by Juan Elosua and Brittany Mayes, January 03, 2018

Published by NPR Training (training.npr.org)

A beginner's guide to spatial audio in 360-degree video

We've experimented with bringing 360-degree video and spatial audio together. This guide captures some of our early findings and includes a sample rig as well as tips on recording, editing and publishing. (external link)

• by Nick Michael, December 18, 2017

Pym.js v1.3.0 release: scroll tracking

Pym.js has a new release that includes an optional throttled scroll tracking

• by Juan Elosua, July 24, 2017

Published At Source (source.opennews.org)

Subverting the story model

How we broke the story model and remade it to suit the new pace of news — and how you can, too (external link)

• by Tyler Fisher, March 31, 2017

How we cleaned up and ranked our listeners' favorite albums of 2016

A messy process for messy data

• by Lisa Charlotte Rost, December 16, 2016

Published At Source (source.opennews.org)

How NPR transcribes and fact-checks the debates, live

Behind the scenes of the Visuals team’s most technically complex project yet (external link)

• by Tyler Fisher, October 18, 2016

Pym.js v1.0.0 release: What do you need to know

Pym.js has a new release that tackles some integration problems with CMSes. Let us break down the main goals and changes for this release

• by Juan Elosua, August 30, 2016

How we built a VR project using web technologies

VR is new and weird and scary, especially on the web, but we did it and so can you!

• by Tyler Fisher, July 22, 2016

Useful scraping techniques

How to scrape thousands of URLs in minutes.

• by David Eads, June 17, 2016

A better way to track listening

Let's stop using vanity metrics to make us look better for advertisers and start really learning about our users.

• by Tyler Fisher, May 17, 2016

Published At The Carebot Blog (thecarebot.github.io)

Why should I Carebot?

Because what gets measured gets done. (external link)

• by Livia Labate and Brian Boyer, April 29, 2016

Lunchbox update: We're dropping support for electron

As it turns out, corporate IT policies make distributing a newsroom tool as a native app really hard.

• by Tyler Fisher, March 21, 2016

Published At Source (source.opennews.org)

Introducing Elex, a tool to make election coverage better for everyone

This new collaboration from the New York Times and NPR needs your help (external link)

• by Jeremy Bowers and David Eads, December 10, 2015

Do visual stories make people care?

A deep dive into user engagement on our sequential visual stories

• by Tyler Fisher, November 19, 2015

The Pympocalypse

A news nerd horror story

• by Christopher Groskopf, October 30, 2015

Published At Source (source.opennews.org)

Introducing Agate: A better data analysis library for journalists

agate, a Python library optimized for humans, reaches 1.0 (external link)

• by Christopher Groskopf, October 27, 2015

Parsing complex social study data

How we crunched numbers from the World Values Survey.

• by David Eads, October 20, 2015

How to apply to an internship at NPR Visuals

We want to see your best work. Here's what we expect from applicants and what applicants can expect from us.

• by David Eads, October 14, 2015

What's new in our first release version of the dailygraphics rig?

We've fixed a "release" version of the dailygraphics rig for the first time. Learn about the new `block_histogram` template, improvements we've made to label positioning and more.

• by Christopher Groskopf, July 17, 2015

Simplifying map production

We're experimenting with making simple locator maps in D3 (bypassing ArcMap), with geo data processed through a new command line utility called mapturner.

• by Alyson Hurt, May 18, 2015

Let’s tesselate: Hexagons for tile grid maps

Bored with four-sided tiles for your grid map choropleths? Add two sides and amaze your friends!

• by Danny DeBelius, May 11, 2015

Tech note: Connecting to an Amazon RDS database from a legacy EC2 server

New Amazon RDS instances require the use of Virtual Private Cloud networking, which can cause connectivity issues for old EC2 instances. Here's how to connect.

• by David Eads, May 08, 2015

Published At Source (source.opennews.org)

Audio in the browser: Horrors and joys

Tyler Fisher of NPR on the past, present, and future of web audio (external link)

• by Tyler Fisher, April 30, 2015

Better, faster, more: recent improvements to our dailygraphics rig

A week of hacking on the daily graphics rig allow us to work faster and with more flexible components.

• by Christopher Groskopf, April 28, 2015

Making small multiples maps with invar

Use the invar toolkit to generate many small maps centered on different cities.

• by Christopher Groskopf, April 02, 2015

Published At Source (source.opennews.org)

The Evolution of NPR's Picture Stories

Behind the scenes on the iterative growth and change of our stories and formats (external link)

• by Wes Lindamood, March 18, 2015

Switching to OAuth in the App Template

We updated the way the App Template gets data from Google Drive. Here's what it means for you.

• by David Eads, March 02, 2015

Multivariate testing: Learning what works from your users at scale

We ran an experiment to figure out how to end a story. Here are the results.

• by Tyler Fisher and Livia Labate, February 26, 2015

Baking Chart Data Into Your Page

A new dailygraphics feature lets users embed JSON data from a Google Sheets.

• by Alyson Hurt, January 28, 2015

Putting Radio On The Television

How people used the 2014 Election Party, and what we learned.

• by Christopher Grokopf and Alyson Hurt, January 22, 2015

Responsive Graphics In Core Publisher With Pym.js

For NPR member stations: A workaround to use Pym.js responsive iframes in Core Publisher posts.

• by Jim Hill/KUNC, December 19, 2014

Improving User Engagement Through Subtle Changes: Updating the Book Concierge

This is a catalog of small improvements, why we made them, and the difference they made.

• by David Eads and Christina Rees, December 12, 2014

Three interesting code snippets from NPR's Election Party

Our Election Party did many things different things, but here are three abstracted, interesting pieces of code from the project.

• by Tyler Fisher, November 17, 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

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

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 iframes.

• 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 iframe 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 iframe 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-iframe library and the first project launched from the OpenNews Code Convening. (external link)

• by Jeremy Bowers and Alyson Hurt, April 15, 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

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 Set Up 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 News Apps team, 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

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