Wednesday, 14 October 2015

Mapping the Arctic sea ice

There as been a lot of attention about the diminishing Arctic sea ice in recent years. We’re often exposed to images showing the extremes. My goal was to show the changing sea ice month by month, and even day by day. Sea ice is a critical component of our planet because of its influence on the global climate.

The sea ice cover in the Arctic in September 2015. The black line is the median extent (1981-2010) for this month. See interactive version.


The graph shows the change in sea ice cover for September since 1979, in percent from the mean extent (1981-2010). September 2015 had the fourth lowest extent in the satellite record. See interactive version.

The National Snow and Ice Data Center (NSIDC) provides two great datasets collected by satellite of the Arctic Sea Ice:

Sea Ice Index
You get the longest time-series using Sea Ice Index, which dates back to November 1978. The dataset is available at 25 km resolution. The images and data are produced in a consistent way making it appropriate for use when looking at long-term trends in sea ice cover.

MASIE
MASIE is a newer dataset at 4 km resolution, which dates back to 2006. Recently they also made the dataset available at 1 km resolution (back to December 2014), which is great for regional maps. Use MASIE when you want the most accurate view possible of Arctic-wide ice on a given day.

This page further explains the difference between the two datasets.

Responsive map layout adapting to various devices. Image from Am I Responsive.

Polar maps are hard to make with popular mapping tools like Mapbox and CartoDB. I love these tools, and I use them a lot when the Mercator projection makes sense. But Mercator is a terrible match for polar data. Not only are the areas towards the poles greatly distorted, the world above 85°N or below 85°S simply don’t exist! While waiting for better projection support in these tools, you can try these hacks: Mapbox example, CartoDB example.

We should always pick the right tools for our job. For this project I ended with a geohipster stack of D3.js, GDAL and Node.js on Digital Ocean droplet. There is also a touch of CartoDB to store some tabular ice extent data, but no geodata this time.

D3 has great support for different map projections. I decided to use the same polar stereographic projection as the original sea ice datasets. This made it easier to keep the original resolution of the sea ice datasets. The only thing I did was to rotate the map to get Norway and Europe in the center - sorry to my North American readers ;-)

Sea ice maxiumum (March) and minimum (September) in 2015. See interactive version


There is a significant yearly cycle in sea ice cover, usually reaching a maximum in March, and a minimum in September. See interactive version.

Bonus information for the map geeks: The polar projection of MASIE and Sea Ice Index is not exactly the same - not only is the central meridian different (-80° vs -45°), the latitude of true scale is 60° for MASIE and 70° for Sea Ice Index. The first discrepancy is just a matter of rotating the images until they overlap. To fix the latter you have to alter one of the projections to allow them to line up.

I wanted my map to be up-to-date with the latest sea ice data available. I don’t have time to update the map every day - so I needed to do this in an automatic process. It was achieved by periodically checking for new data on the NSIDC servers, download the files and convert them to a web friendly format. The original GeoTIFF showing the sea ice extent on October 12 is 1.7 MB, while the compressed PNG shown on the map is just 12 KB, with the same 4 km resolution!

Animated GIF showing the changing sea ice extent from maxium in March 2015 to minimum in September. The animation is recorded directly from the website, showing the benefit of the highly compressed PNGs from an SSD cloud server. 

D3.js and SVG are a great match for responsive map layouts adapting to various screen sizes and resolutions. I wanted this map to be both mobile friendly and big screen friendly, and it was achieved using CSS3 flexbox and viewport units.

Please contact me if you’re interested in using this visualisation, or if you would like help on another mapping project.

No comments: