How I Made This Graphic: A Comic

For my first published graphic for NPR, I worked with digital editor Jason Breslow and fellow intern Avery Ellfeldt to create a graphic for a story about the impact that warming waters off the coast of Maine are having on the local whale population.

Here’s how I did it, in comic form:

How I made this graphic

An editor told us about an upcoming story, and we talked through options for graphics.

What elements do I have and how do I show them best?

Maybe visualizing recent trends would be helpful?

Call a researcher to check work, have a new idea

Wouldn't it be more helpful to visually show the actual warming as an animation?

Pulled yearly temperature data into QGIS; exported a separate map for each year and styled the maps in Illustrator; assembled layers in Photoshop

Then I ask my great team for edits!

Finally I used the graphics rig and templates to add the graphic into the story

This is what the final animation looked like

Details And Caveats

While I love making maps, I feel I am unqualified to call myself a cartographer. I owe much of my training to fellow news map-makers, and I look forward to learning more about map-making in the future! Also, the final product would not have been possible without heavy research, design and judgement input from colleagues and from subject matter experts at NOAA.

I used yearly composite sea surface temperature anomaly data from NOAA Coral Reef Watch. This dataset compares measurements of ocean surface temperature against long-term averages from 1985-1993. The values shown are the deviations (anomalies) from those averages. Areas in purple to blue represent negative anomalies, or water temperature cooler than the mean. Areas in orange to red represent positive anomalies, or water temperature warmer than the mean. NOAA releases anomaly data for different time intervals, and I used the average annual anomaly composites for the years 2005-2018. I also used shapefiles from Natural Earth for my base map.

I created the maps using QGIS, then styled and animated using Adobe Illustrator and Photoshop. I embedded the final product on a NPR story page using our dailygraphics-next rig. (The map also made a guest appearance on the NPR home page!)

Takeaways

If I had to make a similar animated map again, I would definitely find a way to automate the process to make the edit process less painful. Every time I got an edit, I had to tweak all the individual Illustrator map layers, reexport them to Photoshop and, finally, reexport the animated GIF. In the timeframe I had, I wanted to work with the skills and tools I found familiar, but this workflow is unsustainable long-term. Other challenges with this workflow included:

  • The GIF had small but definite jitters from manually aligning the layers in Photoshop.

  • The final product is a static GIF, which means that text won’t always scale readably between desktop and mobile.

  • SVG and PDF exports from QGIS are frequently unreliable in how they preserve layers and image resolution. That wasn’t as much of a problem with this graphic, but in the past I’ve often had to reexport map layers in different file formats and combine them for maps with greater raster detail.

Next time, I could try a couple different approaches to improve my workflow. For example, I could continue with my QGIS and Illustrator workflow, but instead have one base map layer and switch out the individual temperature image layers on top. That approach would likely remove obvious jitters in an animation, since I wouldn’t be manually aligning the base map on each layer. More consolidated layers would also mean a more streamlined edit process: If I needed to edit a feature on the base map, I could do that without touching the temperature layers.

I could also try writing scripts to generate maps. There are many workflow tutorials to experiment with, including Dylan Moriarty’s command line mapping tutorial with mapshaper and makefiles and Mike Bostock’s command line cartography tutorial using D3 and TopoJSON. This scripted approach is especially useful for projects like this one that rely on a consistent, repeated series of steps.

Never miss a gig

Join the Visuals Gigs mailing list to get an email when we post internships and full-time jobs.

Your membership will be kept confidential.

 

Dailygraphics Next

One-stop tooling for creating responsive news graphics from a range of D3-based templates

Sidechain

Responsive iframes for modern browsers

Interactive Template

A modern site generator with live reload and support for loading data from ArchieML, Google Docs/Sheets, CSV, JSON, and more

 

On The Team Blog

More