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