Incidents at Sea

This visualization is based on the Reuters article Oil spilled at sea: Putting the Sanchi disaster into perspective. This article includes a map visualization that reduces the number of text annotations, rescales the text, and updates the size encoding and legend between different device-specific visualizations. In this example, we produce a map with similar annotations but also demonstrate other responsive techniques (e.g., rotating the map for the portrait orientation).

For each visualization, you can use the three dots to (1) save the image, (2) view the Vega-Lite spec, and (3) see the result in the Online Vega Editor.

Desktop Visualization (825x585 px)

This visualization approximates the one from Reuters, using data from ITOPF, which includes the top 20 major spills through 2018; as such, you may notice that some of the data points from the Reuters graphic are not included in this recreation.

Phone Visualization - Portrait (325x585 px)

We rotate the map to better use the space of the portrait orientation. However, we maintain the rotation of the labels to ensure legibility even in this orientation.

Phone Visualization - Landscape (585x325 px)

For this example, the landscape version is very similar to the desktop version, but with a much tighter margin on the map content; however, the map still shows all the same data.

Thumbnail Visualization (240x120 px)

Since the original article focuses on comparing to the Sanchi disaster, we designed the thumbnail to focus on this piece of data with a hint of the larger context.