Mapping wind barbs to show speed and direction

Peter Liu
Wed, 18 Jan 2017 09:00:00 -0500

Wind barbs are ideal for visualizing wind patterns over a large area: they point in the direction of travel, and their length and notches at the end denote velocity at each position. For example, a full line on the wind barb is ten knots of speed, and a half-line is five knots in that direction.

Wind barb notation (image courtesy of http://www.wildgoosesailing.com/).

I took a geoJSON file of global wind data, and used Mapbox GL JS to create custom wind barb icons and overlay them on a map. By leveraging data-driven styling to dictate styling rules, we can automatically update maps as new data arrives, ensuring that our visualization stays current. While this demo uses static wind data, a dynamic dataset would automatically update the direction and style of the wind barbs to represent the direction and speed of wind across the globe.

View full-screen demo

How we made the map

To create the wind barbs, I started with a GeoJSON of gridded points, each with a direction and velocity property.

In Studio, I added barb symbols for each wind speed to the dark map, before initiating the map using Mapbox GL JS. Once the map loads, I added the GeoJSON of gridded points as a geoJSON source.

Designing the barbs in Illustrator (left), and uploading the images to Studio (right).

Then I added symbol layers for each barb type, and set their filter properties to include only points within their respective speed intervals. I set their marker-image properties to match their corresponding barb symbol, and drove their icon-rotation with each point’s direction property. To see how this all comes together, check out the full source code.

Hit me up on twitter @chieflybrit if you have any questions!