Re-viz-ited: Mapping an Early Spring
By: Rachael Dottle
Tags: D3js, Dataviz, Data Visualization, Maps, GIS

Re-viz-ited: Mapping an Early Spring

Letting go of any preconceived notion of the best way to do something may reveal a better way

A while ago, I’d planned a data visualization remake (re-viz-it!) to focus on — and be published by — the arrival of spring. But far more important issues have been on my mind since then: the pandemic, police murders — like those of Breonna Taylor and George Floyd — and the international Black Lives Matter protests in response. It’s been a long spring. However, I am hopeful for the changes that accompany seasons and struggles.

For this re-viz-ited project, I’ve gone on a virtual trip through the National Oceanic and Atmospheric Administration (NOAA)’s weird web of open data pages to re-create the work of Lauren Tierney — mapmaker extraordinaire for The Washington Post.

In 2018, Lauren published a series of graphics and maps visualizing how spring comes earlier and earlier in parts of the U.S. I love this project because it uses different datasets and graphics to tell one story with both a national and local perspective. “I timed this project with the start of spring a couple years ago, also cherry blossom season in D.C.,” Lauren explained when I spoke with her a couple weeks ago for this re-viz-ited piece. “The goal of these graphics was to emphasize and give clarity to how spring is moving earlier and earlier, and then tie it to a local example which was cherry blossoms in D.C.”

The first visual in Lauren’s project consists of different-colored leaves overlaying a map of the United States. The use of leaves to represent the data is a simple but beautiful symbol, effective as a visual representation of the data and story.

This map featured first in the article depicts change in first leaf date (the first day that leaves begin to bloom beyond their winter buds) from the Environmental Protection Agency (EPA).

I’m even more obsessed with it now that I’ve had a chance to speak with the creator herself, who told me the decision to use leaves as the map’s symbol was made with her editor just a couple hours before the piece was actually published. “We didn’t run with the leaves until maybe two to three hours before we published this,” Lauren explained. We had horizontal arrows until my editor, Tim Meko, was like ‘What if we did leaves?’ And we tried that out.”

Lauren shared an earlier draft of that arrow map. I appreciate getting to see how a small change in the design of this map really brought the intent and effect home; it’s exciting to be able to see the visualization editing process in action.

Draft of Lauren Tierney’s leaf map showing the change in first leaf date between 1951–1960 and 2005–2016.

My attempt to remake two maps and a chart from Lauren’s piece has been a great exercise in problem-solving, it turns out. Lauren, whose background is in geography and spatial analysis, uses ESRI’s ArcMap, QGIS, Adobe Illustrator, and the Illustrator plugin MApublisher, in her map-making. I tried to translate that workflow into an Observable notebook with mixed results.

So here we are:

My remake of Lauren’s leaf map showing change in the first day that leaves grow beyond their winter buds between the average for 1951–1960 and 2005–2016. You can see the map and code at https://observablehq.com/@rdottle/spring-is-sprung.

Like my other re-viz-ited projects, I chose to remake two maps and one chart from Lauren’s piece using D3 in an Observable notebook. I did this in order to share the code and to make the steps transparent for anyone interested in a deeper look at the code and data.

Reverse-engineering this leaf map was more challenging than I originally expected. Symbol maps can be pretty straightforward using QGIS, which includes out-of-the-box icons and shapes to use. But first things first: the data. Lauren’s article includes links to the actual Environmental Protection Agency (EPA) page for her map, which made my work much easier, since I didn’t have to spend too much time cleaning or searching for the data. The data itself is the change in the first-leaf date (one way to measure spring that tracks the first day that leaves grow beyond their winter buds) between 1951–1960 and 2005–2016. I used the same dataset Lauren used in 2018, since I didn’t find a more updated version through my research.

At first, I assumed Lauren’s map was made using QGIS, with finishing touches, like the custom leaf symbol, in Adobe Illustrator. Lauren, it turns out, used an Adobe Illustrator plugin called MApublisher.

“We started out with these simple colored dots and then I was working with my editor and we were figuring out how to bring the data to life. I relied on MApublisher, which allows you to use symbols you create in Illustrator, and assign them data values,” she explained. “That’s how I was able to include creative symbols in there, without QGIS.”

In our conversation about process, I learned something new! I’d never heard of MApublisher (which is not open-source and requires a license) until Lauren mentioned it, and it’s exciting to find a plug-in that bridges the GIS-Illustrator gap.

One of my early attempts using a leaf symbol that was a little too busy.

I ended up making my leaf symbols using Illustrator as well. I drew a few different leaves, and then copied the SVG path, which I used as the shape for my data points in D3. I was inspired by the volcano recreations in my last re-viz-ited project to use the SVG paths from Illustrator to design my leaves.

Once the actual leaf symbols were on the map, I rotated and colored them based on whether they represented an earlier or later leaf growth in relation to the 10-year average from 1951–1960. I adjusted the base map to hide Alaska and Hawaii where I didn’t have data, and made a blue-green color scale. Next, I take on the second map in Lauren’s article that shows temperature projections from the National Oceanic and Atmospheric Administration (NOAA).

The second map I re-viz-ited shows the National Oceanic and Atmospheric Administration’s (NOAA) three-month temperature outlook for June, July, and August 2020.

My version

My remake of Lauren Tierney’s NOAA temperature maps. This map uses 2020 temperature projections for June, July and August and can be found here.

This map looks simple, but I went down a rabbit-hole of NOAA websites trying to figure out which data to use. NOAA produces a lot of maps with monthly temperature outlooks, three-month temperature outlooks, and precipitation outlooks, to name a few. Finding the maps as images can be easy, but then matching that image to the right geographic data can sometimes be tricky. I got lost more than a few times looking for what I wanted, which was a three-month temperature outlook for 2020, similar to what Lauren had used in her map in 2018. And so the map I re-created is an updated version of the one Lauren made two years ago using summer months instead, since spring is just about over.

NOAA website with three-month outlook map; Google Image search for Verner Panton, Danish designer and one of my sources of inspiration.

Once I found the data, I exported it as a JSON, and used D3 to project and map it. One thing I spent a lot of time on was color. The shapes of this particular NOAA temperature outlook are really graphic and made me think ’70s psychedelic art and earth tones. I still wanted to stay within the yellow and red color palette that NOAA generally uses to represent warmth, so I looked for a ’70s burnt orange color to fit into my color scale. I also wanted my red to be bright and graphic without being too saturated — more like a faded-plastic lawn-chair red. When choosing colors, I use the Colorblinding Chrome browser extension to make sure the visualization and its takeaway are accessible to readers of different visual abilities. I also include outlines on the shapes to make sure the distinctions are clear, since I did choose a palette that doesn’t have very high color contrast. Once that was done, I built out a legend and this map was good to go.

Something I’ve come to appreciate through these re-viz-it remakes is when the data visualizer cites and links to the data source(s) she uses. The specific links in Lauren’s article really helped with my remakes. Specific sourcing makes it much easier for readers to dig a little deeper into the data and make a visualization for themselves — like I did! It also encourages transparency, reproducibility, and peer-reviewing, which strengthens the quality of visualization work.

With the second map sorted, I chose to make the last chart in Lauren’s piece. It shows the peak cherry blossom day, which has been occurring earlier and earlier through the past century. This was a tricky one for me. It looks a bit like a scatterplot with a trend line, but made with an oval grid, like a calendar. Once I had finished up my version, I asked Lauren how she made it, she laughed, and admitted that it was a very manual process. She started with a big grid of circles in Illustrator that she counted out manually, double- and triple-checking everything to make sure it was right. My re-creation using code required a bit of creative problem-solving.

My final remake

My final remake of the last graphic in Lauren’s article representing peak cherry blossom data from 1921–2020, via the National Park Service. Code for this remake lives here.

Here’s how I did it: I copy-and-pasted the data of the peak bloom date for each year since 1921 from the National Park Service into a spreadsheet. Then, I imported that data into my Observable notebook. The data included just the peak dates, but I also needed to build a grid that represented each day in March and April for every year in the data.That might be easy enough in a tool like Illustrator, but it was a bit more complicated using code because I didn’t want to manually add and position each oval in my D3 chart. I ended up making a function to generate a custom “grid” dataset to mark the number of days in March and April, which I then used for positioning my ovals. Figuring out the layout and oval grid for this chart was the most laborious part of these remakes, since I spent a lot of time trying out different solutions.

Placing the trend line also took a bit of finessing. Lauren used R, with the help of colleague Dan Keating, to add a trend line to her Illustrator chart, while I generated one using d3-regression and made sure it used the same x- and y-axis scales as the rest of my chart. All in all, this chart took me a long time. Lauren and I had a laugh over it, and talked about how sometimes you might choose to make something manually, instead of using code, and how sometimes that might even be more efficient for the purpose of the work. As Lauren explains:

“We are often working very fast at the Post, and in this case I made the quick decision that manually building the chart in Illustrator with all of the little ovals was faster, based on my skill set, than trying to code it. One of the best things about this team is everyone has their own creative or technical approaches to visuals, and when you bring all these ways of thinking together it can make for some very cool things. There is no such thing as the ‘one perfect way’ to create a visual.”

As a self-taught programmer, what really resonated with me was hearing Lauren talk about her problem-solving approach to her work. Sometimes, manually aligning hundreds of little misshapen ovals in Illustrator makes more sense than writing convoluted code to draw a simple grid. Letting go of any preconceived idea of the best way to do something may teach you a new idea of what the best way might be/could be.