I got in contact with Derek Watkins, graphics editor for The New York Times, to ask him how he went about creating the data visualization for NYT article, “Greenland is Melting Away.” The article, which features intriguing interactive graphics, details the scientific quest of a team of researchers whose goal was to collect samples from the network of rivers along the ice sheets of Greenland in order to make conclusions about the rate at which Greenland is melting. They used the data in order to correlate rising sea levels with global warming and to better understand climate change in general.
The first visual, which features a scrolling interface, zooms in and out on the satellite imagery to show pictures from far ranges (a map created by Derek) all the way to close ups of the scientists’ campsite of tents and a research facility. It also offers clear snapshots of the vein-like rivers. The second visual, “pulls back,” as Derek describes it, or initially zooms out then in to show areas where flow rates were measured.
IT: There were a few people working on this project/article, what parts specifically did you work on/contribute to it?
DW: The four bylines that are on the project are me, Larry [Buchanan], Josh [Haner], and Coral [Davenport]. All four of those people were kind of involved from the beginning of that article. Actually, that’s not true. Coral and Josh had gone to Greenland and done their reporting, but then when they came back, we were all kind of involved from the beginning of the writing process of actually like putting the article together. So part of what I did and my colleague Larry, who was also in the graphics department at the Times — part of what we did was help the story planning and work with Coral, the writer/reporter, to try to figure out what the best way to put the story together was so that the visual elements, like the drone footage that Josh captured on the ice sheet and the graphics that we were gonna be producing, would fit in with the writing and kind of one would flow into the other. And then beyond that, just like once we actually started like creating the article, Larry and I worked on basically the portions that kind of zoom in into the ice sheet there. That was like the main focus, but then we also handled the design of the article like making font choices and just like actually coding that design in HTML and CSS. So we handled that also, but the grunt of the work was on the interactive zooming parts of the article.
IT: Early on in the brainstorming process, what did you want this project to achieve?
DW: So one kind of central part of this story, right, was this idea that we are bringing you down to meet the people that are on the ice sheets, that are actually like spending time and their lives investigating this one aspect of climate change. So it was kind of taking this huge, multifaceted issue and boiling it down to these handful of scientists that are actually living in tents on the ice sheet, and so that was kind of the overarching goal: to use the visuals to make that point, and we ended up doing it explicitly. Like starting really big at the ice sheet and zooming in and in and in until you land on their little camp next to this little temporary lake. That was kind of the initial motivation: to do the zoom from way out thing, but then we also, farther down into the story, we used that same mechanism to pull back out and actually lay some data over the satellite imagery to kind of contextualize what we’ve been talking about elsewhere in the story to say like we’ve been focusing on this one moulin that the scientists are researching, but then when you pull back there’s actually hundreds of them all over the ice sheets so this isn’t just the problem that you’re seeing in the photos and in the writing; it’s actually a much bigger thing.
IT: How did your team attain the data collected and then organize it? What specific parts of the data did you want to visualize? Did you get the data from Coral who was doing the research in Greenland?
DW: No, in this case, none of the data came from Coral, sometimes that’s the case. It kind of just depends. In this case, Coral put Larry and I in touch with Laurence Smith who was one of the characters in the story. She put us in touch with him and then we were like emailing back and forth with him as we were kind of thinking about the visuals that we might do and we had like several conversations with him. At one point we spent an hour having him explain to us the mechanisms by which these moulins burrow down into the ice because we thought at one point that maybe we would have a diagram of how these kind of rivers burrow through the ice and then come out underneath the ice sheet. But we ended up like not even doing that diagram, right, but that’s kind of the process. You just kind of speak with, in this case, the researchers to the characters of the story and just try to slowly brainstorm and think about what visuals might be best to support the points we’re trying to make in the story. And over the course of those conversations, you’re asking them “what data do you have?” And “do you know other researchers that might have the data?” and stuff like that. I think it ended up that Laurence Smith knew some other researchers that he had worked with that had the satellite data that we ended up overlaying, and so he put us in touch with them and they had written like an academic paper basically about the same data that we show in our piece, and they were gracious enough to give the data to us that they used in that paper and so we were able to visualize it. That’s kind of how that one came together. But in general, it’s always kind of a very fluid process where you have an idea, like “I’m not sure if that data exists” so you get in touch with the people that know whether or not it exists and then depending on what data is out there, you might have to change your idea or take a different approach.
IT: So once you received all the data, how did you code both of the of interactive satellite graphics? What were the steps? What tools or techniques were employed to create it?
DW: So to begin with, we basically collected satellite imagery at several different scales where you kind of have this snapshot of the camp which is actually drone footage, you know picture taken by a drone, that the scientists actually shared with us. And then when you get a bit farther back, you’re using like high resolution satellite imagery and then farther back still you’re using publically available medium resolution satellite imagery and then when you’re looking at all of Greenland that’s actually just kind of a map that I made using satellite imagery and data on the shapes of the land masses and things like that, right, so that’s why when you get kind of all the way back, it has this kind of very clean look because it’s not actually a satellite image, it’s more a map. So that was kind of the first step which is, after identifying where we want to zoom in, to kind collect all of this material, so the different zoom levels that we wanna stay between. And then it was just a matter of really meticulously just lining them up and basically cropping out square at each zoom level that is perfectly centered on the one that came before it, so that when we zoom in, they all line up perfectly. And basically keeping track of how zoomed in each snapshot is relative to the rest of them so that once we actually started coding them up, we could line them up to be in the right spot. So that’s the very quick way of describing a process that took several weeks. And then beyond that, once we have these snapshots that we know the scale of and we know where they’re located on the Earth’s surface, we just wrote a lot of custom javascript to basically look at where the reader is in terms of scrolling through the page and then based on where they are on the page, we then kind of animate this zoom and fade between the different images that we’ve created. Is that detailed enough?
IT: Yeah, if you could get as specific as possible in terms of the technologies, that would be great.
DW: We used, when we were preparing the satellite imagery, an open source GIS program, which GIS stands for “Geographic Information Systems.” It’s basically software that deals with geographic data of all types. We used an open source one called “QGIS” to kind of collect the satellite imagery and line it up and stuff like that. After that we used Photoshop to kind of color-correct the satellite imagery and to make the map of the very well-zoomed out level. And then I used Adobe Illustrator to crop out those images and export them and these big kind of squares that make up the flags that you’re zooming in to. And then on the page itself, we wrote a lot of custom javascript. I think we used javascript library also that’s called B3, which you might be familiar with. It’s very popular for data visualization. It’s got some good mapping tools included in it that makes it kind of easier to do things like this. So I used javascript and then I used what’s called a canvas element on the web page. Basically a canvas is just an image that lives on the webpage like any other image except that you can draw to it with your computer code, right. So you basically have this image that you can draw anything you want: circles or squares or lines or like an arcade of other images. And so basically we used javascript to, every time somebody scrolls, figure out how far zoomed in should we be, how big should we make the images that you should be able to see at this point, and based on how zoomed in you are, how should we save the images between one another. So the computer code is basically just doing that like 60 times a second as somebody scrolls down the page, and it writes it to the canvas element which then shows up as this image that is animating on your screen.
IT: You said it took several weeks to make, so on an average day, how long/how many hours would you spend on the computer working on the coding?
DW: I guess it depends. When we’re on the end stages of a project like this, I could spend all day coding. And I definitely did spend several days doing just that. But usually it’s not that we’re only writing code, right. Usually there are other tasks to do and so we were kind of doing maybe some reporting. And then also in practice, we’re usually juggling two or three projects at a time, so maybe we need to work on this a little bit, but then work on the coding for the early stages for another project. So usually it’s a bit more broken up than that. It’s usually only when we’re pretty close to a deadline and things need to get done that we would spend like all day writing just pure code. But overall, something like this definitely takes several days of coding. Not totally sure how long this one took exactly because it was broken up like I was saying before, but it definitely, you know, took like several tens of hours, at least.
IT: What were the biggest challenges in creating the graphics?
DW: I think just from a technical point of view, it was pretty difficult to get everything to line up the way that we wanted it to. That was probably I guess the most difficult part: just making sure that the transitions were very smooth and that you couldn’t see the points at which were fading between one image and another so that it felt like this very smooth animation.
IT: What does this project not show that you wish you could have fit in?
DW: I don’t know; there were definitely other aspects of the story, like the thing I was talking about before where we were considering doing the diagram of how these things dig into the ice sheets. There’s always things like that — there’s always more information that you could throw into a story. But I don’t know if I would say that the story would be improved if we put that in there. You know, like, we made the conscious decision not to put it in because we wanted to keep the story focused on the most important things that we wanted to communicate, so I feel pretty happy with how the story turned out. And I mean, typically, we’ll end up with more regrets about what we could have done with a story if we’re on a very short time frame. But with a story like this, we had enough time to really plan it out and be specific about what we wanted to include and where we wanted to include it. So with this story, I think we had enough time to make it the form that we wanted it to be in and to make specific choices and was able to execute on those. So in this case, I feel pretty good about what we ended up including and I don’t have any large regrets.
IT: From data gathering to digital design, what advice do you have for journalists trying to build similar visualizations?
DW: From the learning side of learning how to do things like this, I think, even if you don’t have much of a background in design, just reading a bit about very basic design rules, the very basic understanding of how to approach visual communication, can go a long way. So I think that’s a valuable thing to have, even if you’re not going to be making graphics full time, to kind of understand the principles of visual communication. Beyond that, if somebody wants to jump in deeper, I would definitely urge them to learn HTML and CSS and Javascript just because that’s kind of like the bread and butter of so much of the stuff we do. And also Adobe Illustrator: still kind of the de facto main software program that people use to make stuff like this. So that’s kind of from a training and learning and software point of view. Beyond that, I think what I would say is that it’s important to keep in mind that when you’re doing something like this — making a graphic to support a story or to be the story — you’re still doing journalism, right, and all the same rules and same ways you would be careful about getting things correct in a written story still apply when you’re doing visual journalism and in some cases, even more so because it can be much easier if you’re doing a visual to introduce error, introduce detail that you didn’t necessarily report out without even realizing it. So I guess that’s kind of a broader piece of advice I have: if you’re doing graphics or visuals for a story you should approach it as another medium through which you’re reporting the journalism and things that you sound out. In that way it’s really no different from writing a story and making sure you get all the facts right.
