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.
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!