Storm cells indicate how powerful storms are and where they’re headed. Each cell is made up of multiple data points - from speed to severity - which makes for a unique mapping challenge, similar to our post last week on wind barbs. I’m using Mapbox tools to unpack these datasets and create a new kind of visualization which combines all these data points in sleek, custom icons.
I pulled in data from The Weather Company and used Mapbox GL JS to display each storm’s location, speed, direction, and severity at runtime.
The dots show each storm’s current location, while the color and radius of each cell correlates to its severity. A series of concentric cells projected from each storm shows the storm’s potential travel in 15-, 30-, 45-, and 60-minute time frames. The color of each set also correlates to the storm’s severity. Labels on the edge of each cell denote the timeframe represented. Each label also has a circle background, the color of which is correlated to storm severity. A dotted line spanning the center of each cell serves as a visual aid, and a popup appears whenever the mouse hovers over a storm, providing bearing and speed information.
How I made the map
Preparing the data
I took the XML and converted it into a series of geoJSON points: aside from latitude and longitude, I stored all attributes in each point’s properties object. Next, I generated four pizza-shaped cells for each storm. Given speeds and directions of travel, I used Turf (specifically turf.destination) to generate four 45-degree polygon wedges per storm before adding these to the geoJSON. For each cell, I also stored the storm’s severity, and generated a geoJSON point at the center of its arc, with severity, direction, and timeframe as properties. Last, for each storm, I generated a line from its location to its outermost cell label. This line also gets a severity property.
Rendering the visualization
In Studio, working with the Mapbox Light basemap, I added symbols for each cell label: 15, 30, 45, 60, before initiating a map in JavaScript using the Mapbox GL JS API. Once the map is loaded, I add the previously assembled geoJSON, as a geoJSON source. For the storms, I add a circle layer and drive its circle-radius and circle-color properties with the storm’s severity property. For the cells, I add a single, translucent fill layer, driving fill-color with its severity property. Once stacked, the cell’s progressive fading will appear naturally.
For the cell labels, I added two layers. First, a translucent circle layer with its circle-color driven by the severity property. Second, a symbol layer with symbol-image tokenized by its time property, and icon-rotation driven by direction property. For the dotted line, you can add a line layer, and drive line-color with its severity property.
What sort of data do you want to visualize? Reach out on Twitter @chieflybrit if I can help.