WMO Codes

Periodic Table of WMO Weather Condition Codes

Unlike some other "periodic tables," this one uncovers several patterns in the WMO weather condition codes.

How can you express the 28 (Open Meteo) WMO weather condition codes as distinct icons and colors?

The Open Meteo documentation gives a short description of each code, but the best way to graphically visualize this information in a weather app is not obvious.

Open Weather, another weather API, simply hands you everything on a single page. The previous version of my weather app used Open Weather. (My app’s icons were actually from DarkSky, one of the best weather API’s until they were acquired by Apple.) However I was not satisfied with just mapping the 9 icons onto Open Meteo’s 28 different conditions. Open Meteo provides more information, and I wanted to expose it all!

Organizing the Codes

There are actually 100 unique WMO codes, but Open Meteo only reports a subset of these. Open Meteo groups the codes into rough categories and says the WMO codes are ordered by severity (0 for clear sky to 99 for thunderstorm with hail.)

I adjusted Open Meteo’s severity ordering in a few ways:

• Intermittent “showers” (WMO codes 80-82) should be less severe than continuous “rain” (WMO codes 61-65).
• “Freezing drizzle” (WMO codes 56-57) seems more severe than just “rain” (WMO codes 61-65).
• Like rain showers, “snow showers” (WMO codes 85,86) should be less severe than continuous “snow” (WMO codes 71-75).
• “Snow grains” (WMO code 77) seems like the snowy version of “drizzle.” So it should be less severe than other forms of snow (WMO codes 71-86).

My re-ordering was slightly subjective, but it revealed a satisfying new way to group the codes into five broad categories. In order of increasing severity:

1. No precipitation
2. Rain
3. Freezing Rain
4. Snow
5. Thunderstorm

The codes from each category can be represented on a 3x3 grid: three conditions by three levels:

Each column represents a single weather condition. Each condition column can be divided into three levels. The severity increases as you travel to the right and down the grid. So the least severe code is in the upper-left corner; the most severe code in the lower-right.

“Rain” is the only category that fills all nine cells in the grid, but it is pretty clear where to place the other codes in their respective grids.

• “Clear” and “Snow Grains” should probably be located in the upper left corners, but they are placed in the middle for aesthetic reasons.
• “Heavy Freezing Drizzle” and “Heavy Freezing Rain” have “Heavy” dropped from their labels for brevity (the same reason “Freezing” is changed to “Icy”).

Assigning Distinct Colors

The grid organization made it pretty simple to assign distinct colors to each code. Each grid has a unique hue. The cells in each grid have different versions of that hue, getting darker and more saturated as the severity increases. An interesting detail is that white text on dark background tends to indicate a more severe weather condition (I intentionally tweaked the colors so this would happen).

I used Pico CSS’s color system, which has a linear progression of colors. It may be interesting to vary brightness on one axis and saturation on the other axis. In order to avoid duplication of color values 350 and 450, I added a second hue for the final column in each grid.

Weather Icons

Before worrying about colors, I actually started by finding a nice-looking weather icon set. Very few sets covered much beyond the nine “DarkSky” icons; even fewer were aesthetically pleasing. I found a few candidates, and Airycons was the clear winner: open source, nice-looking, and covered 23/28 different conditions. Can you find which five icons had to serve double-duty?

Future Work

After visualizing the weather codes on a timeline, I learned there are some downsides to displaying more codes:

Showing more conditions seemed like it would be more useful, but it may be like predicting “3.1415926535 mm of rain will fall, stopping in 2.7182818284 hours.” The numbers imply a higher level of precision than the forecast can reliably predict, and the extra digits make it harder to read.

Often the forecast doesn’t even get the precipitation condition correct: it can be dry when the forecast predicted rain, and vice versa.

More codes result in a busier plot, so it may be preferable to combine similar conditions into longer spans that can fit the condition labels. Often I just want to know if it will be raining or not; the exact type of rain isn’t as important.

The WMO code table can be used to create a “level-of-detail” setting for the weather condition icon/color. By combining a series of codes sharing the same category/condition the weather timeline can be greatly simplified.

Links

• Web version of WMO Code table
• Relevant source code
  • WMO_CODES
  • +page.svelte

Also check out WeatherSense:

• Still a work-in-progress!
• A novel way to visualize the weather “trendcast”
• Successor to UltraWeather