Weather on the Web

An evaluation of visualisation techniques adopted in meteorological diagrams and forecasts on the internet
Oliver Tomlinson - Autumn term 2009

Figure 1 Weather map of Europe, 10th Dec, 1887

Weather on the Web

The weather is something that has a continued effect on the way we run our lives, from the mundane decision of what clothes to pack for a holiday, to the severe conditions that can destroy livelihoods and threaten lives. The invention of the electric telegraph in 1885 allowed meteorological information to be communicated much faster than preceding years (1). Previously, by the time a person had received a physical copy of the weather using mail, conditions would have undoubtedly changed; but new technology allowed information to be spread almost instantaneously. With advancements in technology in current times, we are now able to observe conditions in real-time and make forecasts all over the Earth by using the internet. This information was only available for qualified meteorologists, but now every person connected to the network can observe vast amounts of data. However, information to the masses can result in incorrect interpretation due to issues of legibility and misunderstanding. This report looks at a sample of web-based weather services and makes comments upon visualisation clarity and information design. It looks at the challenges a weather graphic faces before exploring graphic elements to aid, or hinder, usability and understanding. The concluding statement gives recommendations on future work in this area, and author's thoughts on the future of weather visualisation.

Meteorological Diagrams: Objectives and Challenges
As meteorological data became available to scientists in the 1880s and 1890s, there was a need to standardise graphics in order to convey information clearly (Figure 1). The format of the early weather diagrams, and the icons they use, can still be understood by meteorologists today. In current times, newspapers, television and radio have traditionally been the means of conveying weather information to the public, but increased internet use has allowed information to be available at any time, any place, and in richer design formats. However, in its raw form, weather information is complicated and enigmatic to the general public; only the meteorologists can decipher it to make any worthwhile predictions (2). Weather diagrams for the layperson must be redesigned, or re-worded, for understanding, but not at the cost of key messages and probabilities. This 'graphic excellence' can be defined using the words of Edward R. Tufte (3), by stating that weather diagrams for the layperson will be:
Ÿ Presenting interesting data focusing on quality of substance, statistics, and design; Ÿ Communicating complex ideas with clarity, precision, and efficiency; Ÿ Illustrating the greatest number of ideas in the shortest time; Ÿ often multivariate; Very Ÿ Comparable to allow interpretation of the whole story; Ÿ Accurate and portraying the truth.
Oliver Tomlinson - Autumn term 2009 1

Figure 2 Summer Temperature, Met Office seasonal forecast 2009


Weather on the Web

Along with the challenge of mass data communication for mixed needs, one of the greatest difficulties encountered in weather portrayal is the issue of probability (4). The weather we experience today can only affect weather 10 to 14 days ahead of us, so any predictions made past this time period must look at anomalies in the current environmental climate to make predictions. Therefore, as meteorologists make forecasts the probability of outcomes varies as time increases. The following case study illustrates how poor messaging, via language and diagrams, can affect the public perception on meteorological forecast reliability.

“Barbeque Summer 2009”
In April 2009 the Met Office gave a presentation on its seasonal weather forecast for the UK where it promised “odds on for a barbeque summer” (5). This statement received much criticism from the press in following months as the weather did not meet public expectations. As an article in the Guardian newspaper states, the weather announcement actually meant that the summer prediction would be warmer than average, but this still encouraged millions of 'staycationers' to book summer holidays in the UK (6). Philip Eden (Vice President of the Royal Meteorological Society) comments in the article, “I think the general public realise there is a margin of error”. An article in the Independent around the same time also contains comments from a meteorological professional. Tom Tobler (forecaster at Meteogroup) states, “if it was a 65 per cent chance it doesn't really tell you a lot as there is a 35 per cent chance that it could go the other way,” and follows by saying, “part of the problem with long-range forecasts is communicating with the public the uncertainty,” (7). Figure 2 is a slide from the presentation; it attempts to illustrate the probability of above average temperatures in the UK. There are no data values shown so the observer cannot ascertain by how much the temperature will be above average, or compare with any other information on past years. The choice of colour and smoothing could indicate a 'heat-wave' flowing across the middle of the graphic; this feature is likely to be misinterpreted. Another graphic from the presentation is mentioned in a later section of this paper.

Oliver Tomlinson - Autumn term 2009




Figure 3 Geographical data collection by the ECMWF. 3.1: Land & ship coverage 3.2: Weather buoys 3.3: Aircraft data 3.4: Satellite feedback





Figure 4 Plumes. 4.1: Nino plume from ECMWF seasonal forecast 4.2: Reading forecast from ECMWF


Weather on the Web

Raw Data Collection and Visualisation
Meteorological data is collected from all over the World, twice daily, 365 days a year. Information may be recorded by weather stations, buoys and ships at sea, aeroplanes (specialist and commercial), satellites, and weather balloons. This mass of data is programmed into specialist 'super computers' to run predictions for accurate forecasting and probability analysis. Figure 3 is a collection of diagrams taken from the European Centre for Medium-Range Weather Forecasts; the diagrams illustrate data collection points (8). It is interesting to note that Fig 3.3 and 3.4 are actually presenting multivariate data, as opposed to only data collection sites. Because weather data is transmitted during flights on aircraft, Fig 3.3 is also displaying flight paths. Fig 3.4 is interesting as it is the only diagram to be portraying actual weather information in the form of cloud cover. These diagrams carry a large amount of 'data-ink'; this is the non-erasable core of a graphic. Correct proportions of data-ink are key to Tufte's principles of graphic excellence (3). To improve these further it would be necessary to tone-down the grid by grey-scaling so it becomes less of a design element; Tufte refers to overbearing elements as 'chartjunk'. Once algorithms have been processed, the raw data is converted into graphics to illustrate current meteorological conditions and predicted forecasts; these are discussed in the next section.

Prediction and Probability
The 'barbeque summer' case study illustrates the challenges of weather prediction and probability; this section shall examine methods of displaying these uncertainties. Forecasts taken from the raw data are often shown in 'plumes'. Figure 4 shows examples of a plume taken from the ECMWF seasonal forecast (9), and one provided to the author by Ross Reynolds of Reading University (4). Plumes start from a known data point before 50 different data lines are shown to predict probability of future conditions. These 50 alternatives take into account such elements as Chaos Theory and weather anomalies; where they follow a similar pattern/line this would indicate a high probability (4). The plume in Figure 4.1 has a high data-ink percentage but, due to the closeness of lines, is difficult to take an accurate reading. A lack of key assumes the reader understands what the diagram is attempting to explain. Figure 4.2, with a key and colour coding, is easier to understand; however, due to the parallelism of the diagrams the observer may compare them to each other when they are actually providing visualisations of very different data sets (10).

Oliver Tomlinson - Autumn term 2009


Figure 5 EPS Meteogram provided by ECMWF via Ross Reynolds

Figure 6 Weather predictions using Vaisala IceCast software, provided by Amey plc to the author

Figure 7 Monthly forecast (Reading) from the Weather Channel

Figure 8 Daily Forecasts: Chiba, Japan Meteorological Society (English translation)

Figure 9 UK temperature probabilities, Met Office seasonal forecast 2009


Weather on the Web

Another method used to illustrate probability is a box plot as shown in Figure 5. It requires a more detailed analysis by the reader but enables a deeper understanding of probability by illustrating percentiles and data spreads. Similarly to the diagrams in Figure 4.2, this diagram has an issue with parallelism causing the reader to compare each chart with the others in the set, even when they are at different scales on the y-axis. Another issue is the information 'spilling' off the chart causing graphical distortion of the box plot and potential misinterpretation by the reader. Figure 6 is an example of a forecasting diagram used by an infrastructure management company (Amey plc), produced by Vaisala IceCast software. Amey will use this data to make decisions on road gritting in the UK during cold periods, so user understanding of this visualisation is vital. Wrong decisions could incur financial losses for Amey if they grit needlessly, or more importantly, can cost lives of motorists if gritting has not been performed in the correct location, at the correct time. Unlike the plumes, the Vaisala diagram does not show multiple possibilities, but just one line for surface temperature prediction, and one for dew point temperature; the user is expected to understand how these two factors relate to one another. There are a number of ambiguous colour codes at the bottom of the diagram which, with no key, are useless. The reader responsible for gritting is not given any supporting evidence to make their decision, no comparative historical information, and no probability indication; they must trust the data used within the visualisation is accurate. As the raw data moves into the reach of the general public, there is a shift in how probabilities are illustrated, that is if they are mentioned at all. Graphs are less likely to be seen, they are replaced by tables as shown in Figure 7 taken from the UK Weather Channel website (11); here a percentage chance of precipitation is given in text format within a cell. Tufte mentions that Japanese graphical distinction is consistent with its heavy use of statistical techniques in the workplace and extensive training (3); however, meteorological forecasts found on Japanese websites found a similar, tabular expression of probability as can be seen in Figure 8 from the Japan Meteorological Society website (12). This diagram is an improvement on the Weather Channel table as it provides the reader with a scale of probability alongside a level of precipitation (units are however missing but this may be due to the English translation of the site). Returning to the presentation by the Met Office on UK summer forecast 2009 (5), it is possible to understand why the public may have misinterpreted the information by looking at the slide shown in Figure 9. The reader is drawn to the large orange column stating 50% above average, and may not read the accompanying text or even the details of the temperature on the x-axis. It would be possible to read this graph and presume the summer temperature could be 50% above the average where, in fact, the graph states there is a 50% chance of above average temperatures. The diagram does not show this above average temperature could only be an increase of 0.1°C.

Oliver Tomlinson - Autumn term 2009


Figure 10 UK weather forecast key, Met Office website


Weather on the Web

Weather Icons and Pictograms
As seen in Figure 1, symbols have been used in weather graphics since the late 1880s. They follow a standard design format that enables the reader to understand graphics produced in different locations, by different people, and make comparisons. Due to the varied nature of weather conditions, there are large numbers of pictograms to represent them; this section observes some of the variety found on the internet. But first, it is worth noting a few points on information memory and icon types.

Icon Memory
Where a large amount of information is given to the reader to remember, it is useful to apply the theory of Miller's Magic Number. Miller's research found the human brain can remember seven 'chunks' of information, plus or minus two, within the short term memory (13). By chunking information together it is possible to remember larger amounts of content. In the example below Mnemonic devices are used to remember the colours of the visible light spectrum. Letters representing a colour are chunked in order to represent a name to aid memory (14).


Icon Classification
Yvonne Rogers classifies icons by arranging them in four groups (15):
Ÿ Resemblance: Direct portrayal of an object; Ÿ Exemplar: An example of the classification of objects they refer to, e.g. knife and fork to

portray a restaurant;
Ÿ Symbolic: A high level of abstraction than the actual object depicted, e.g. broken glass to

symbolise a fragile package; Ÿ Arbitrary: No relation to an object or concept (these icons must be learned), e.g. no entry symbol.

Figure 10 is a key found on the Met Office website (16); it shows a vast number of pictograms for a large number of weather conditions and data sets. Memory of the weather condition symbols is aided by designing them in a 'resemblance' format, i.e. each one (excluding fog and haze) represents the weather it portrays, with ambiguous elements such as dust and mist accompanied with descriptive type. An attempt to chunk the symbols has been made, but lack of spacing does not help the reader to separate similar icons. Wind, temperature, solar UV, and pressure chart symbols are mostly 'arbitrary' design, requiring the reader to learn their meaning. Warm and cold fronts do give visual cues by colour and symbolism of suns and icicles.

Oliver Tomlinson - Autumn term 2009


Figure 11 Weather icons

Japan Meteorological society [5th Dec, 2009. 10:18]

Proposed changes to BBC weather icons 11/changes_to_bbc_weather_site.html [1st Dec, 2009. 15:26]

Yahoo weather [5th Dec, 2009. 20:57]

Daily mail weather index.html [3rd Dec, 2009. 23:03]

Sky News weather [3rd Dec, 2009. 13:48]


Figure 12 Secondlife screenshot taken at the NOAA live weather centre

Figure 13 Trade winds and monsoons by Edmond Halley (1686)


Weather on the Web

Figure 11 is a collection of weather icons, found online, from different sources. All weather condition icons are of the resemblance type (excluding wind which often appears as a simplified version of the standard meteorological symbol seen in raw data) and are easily comparable. Differences occur in the placement and scale, especially of the Japanese forecasts. Forecasts of large areas often place icons on a geographical map, whereas more specific city forecasts will place the icon within a table accompanied with more detailed text elements. The Japanese graphics are the only ones within the sample to scale down the icons, and to use colour coded arbitrary circles to represent rain. This style is verging on a graphical texture effect using the data locations; it adds a 'smoothness' to the visual allowing the observer to 'see' weather patterns. Patterns and textures are discussed in the next section. With advances in computer rendering, icons on the internet are becoming increasingly animated, allowing almost real-time changes on screen. Figure 12 is a screenshot taken of the author's 'Avatar' in Secondlife. The image is an observation of the National Oceanic and Atmospheric Administration's live national weather centre; weather is updated in 8 minute intervals and can be observed from any angle, allowing complete interaction by the observer's character.

Maps, Patterns and Textures
Meteorological information is often related to geographic locations, and this is the reason that so much of the data is placed on maps. Geller describes four maps used in weather presentation (2): maps: Show fronts of equal pressure, temperature, precipitation or moisture, wind, or other factors. They are similar to topographic maps in their use of lines to portray information; Ÿ Point-centered maps: Present data in a graphical format without showing relationships, e.g. television forecast maps; Ÿ Photographic maps: Taken from satellites or from the ground, these typically show either visible or infrared spectrums; Ÿ Radar maps: Often low resolution, these illustrate measurements taken over a large area from a central point. They have similarities with Photographic (based on reflected waves), Point-centred (taken from a central instrument), and Contoured (resulting images show weather fronts), as shown in Figure 3.4. Tufte describes these graphics as 'data maps' – applying data to a geographical map (10). The difficulty when creating meteorological data maps is that multivariate data does not just sit on a level, two-dimensional plain; instead, the data may represent three-dimensions or more if time factor is included. Figure 13 is a chart designed by Edmond Halley in 1686 (18). This early example of trade winds and monsoons illustrates how a pattern (or texture) of pen strokes can give direction by alignment, and density by closeness of strokes. Recent research into human perception by Ware and Knight (1995) has shown three fundamental visual dimensions of texture: Orientation, Size and Contrast (19).

Ÿ Contour

Oliver Tomlinson - Autumn term 2009

Figure 14 Natural textures for weather data visualisation

Figure 15 Moiré effect observed in Sky News weather


Figure 16 Methods of colour and shading upon geographical maps

The Weather Channel (USA)

Weather Underground

BBC Weather


Weather on the Web

Visualising weather using multi-layer controllable texture synthesis was investigated for a conference in 2006 (20). A team attempted to code multivariate data on one diagram by applying a changing natural texture. Figure 14 shows the result. By using the texture to represent multiple variables the final composition is difficult to distinguish between the data sets, especially as temperature is based on colour shade, and density (illustrating pressure) has an effect on colour shading. User tests found the approach “more engaging and aesthetic”. When applying a texture to a graphic, one must be wary of the Moiré effect as mentioned by Tufte on his section concerning 'chartjunk' (3). Moiré effect interacts with the physiological tremor of the eye to produce a distracting appearance of vibration and movement, with equally spaced bars causing the most vibration or when grids are laid upon each other. Figure 15 is an illustration of this effect. Not only is the sea texture pointless, it distracts the reader's attention from the data within the diagram. Colour and shading are methods often utilised in meteorological diagrams to illustrate weather conditions; they are a useful tool when animating a sequence or producing a time series. Figure 16 gives three examples: Weather Underground (21), BBC Weather (22), and the US Weather Channel (23). Each diagram in its static form does not illustrate direction of the weather, but they are designed to work as an animation or time series. There could be issues with legibility as areas of geographical information are covered by the data (especially in the large scale of The Weather Channel), but Weather Underground and BBC use transparency to overcome this. BBC adopt a subtle colour gradient between differing climates, whereas the two US sites prefer a more substantial colour change. Tufte states “minimal differences allow more differences”(10), however; Weber's Law of Just Noticeable Differences (14) would prefer the use of higher difference thresholds to aid clarity.

Oliver Tomlinson - Autumn term 2009



Weather on the Web

As meteorological information is passed from the scientists to the general public on the internet, there seems to be a loss in data integrity, and especially the portrayal of probability. This may be the result of 'dumbing down' information for the masses due to the presumption of potential misinterpretation; or caused by graphic designers with little understanding of the raw data, who may be only interested in stylistic elements. To improve this situation, research would need to be performed to ascertain public understanding of meteorological data visualisation; outcomes from this investigation would surely benefit other areas requiring knowledge of complex data analysis such as the medical sector and climate change authorities. An understanding of user requirements is needed before visualisations are designed. The designer should identify if the user requires a broad outlook of weather conditions (e.g. by country) and produce work with subtle colour changes and low levels of chartjunk. If the user requires a more specific analysis of a weather element, designs should aid them in locating points of interest (maybe increasing the difference threshold) and observing trends by making comparisons using high levels of data-ink. As advanced methods develop for collecting and analysing raw meteorological data, visualisations for making this information clear to the public will also need to be enhanced; giving the user a rich, real-time interactive experience, and a complete understanding of the varied probabilities involved in predicting the weather. If achieved, public perception and trust in weather forecasts will improve and faith will be restored from disastrous media attention on meteorological misunderstandings.

Oliver Tomlinson - Autumn term 2009



Weather on the Web

1) 2) Weather Forecasting. URL: [7th Dec, 2009. 15:48] Geller, T. (2007). Envisioning the Wind: Meteorology Graphics at Weather Underground. Computer Graphics and Applications, IEEE. 27, Issue 5, 92-97 Tufte, E.R. (2007). The Visual Display of Quantitative Information. 2nd ed. Cheshire, Connecticut: Graphics Press Discussions between the author and Ross Reynolds, Senior Teaching Fellow, MSc Programme Director & Admissions Tutor. School of Mathematics, Meteorology and Physics, Reading University. 1st Dec, 2009 Met Office Summer Forecast 2009. URL: [3rd Dec, 2009] Topping, A. (2009) Rain puts dampers on 'barbeque summer'. URL: [3rd Dec, 2009. 13:25] Fentiman, P (2009) Why good weather is hard to predict. URL: 1764208.html [3rd Dec, 2009. 13:31] ECMWF: Geographical coverage. URL: [3rd Dec, 2009. 10:34] ECMWF: Seasonal Range Forecast. URL: [3rd Dec, 2009. 10:35]

3) 4)






10) Tufte, E.R. (1997). Visual Explanations: Images and Quantities, Evidence and Narrative. Cheshire, Connecticut: Graphics Press 11) Monthly forecast for Reading, from the Weather Channel. URL: UKXX0117?cm_ven=yahoo_uk&cm_cat=citypage&cm_ite=weather&cm_pla=monthly [6th Dec, 2009. 17:14] 12) Daily forecasts: Chiba. URL: [5th Dec, 2009. 9:29] 13) Miller, G.A. (1956). The Magical Number Seven, plus or minus two: some limits in our capacity for processing information, The Psychological Review, Vol 63, 81-97 (cited in (Visocky O'Grady, J. and Visocky O'Grady, K. (2008). The Information Design Handbook. Switzerland: Rotovision) 14) Visocky O'Grady, J. and Visocky O'Grady, K. (2008). The Information Design Handbook. Switzerland: Rotovision 15) Rogers, Y. (1989). Icons at the interface: their usefulness, Interacting with Computers, 1 105-117 (cited in: Malamed, C. (2009). Visual Language for Designers. Massachusetts: Rockport 16) UK: Forecast Weather. URL: [3rd Dec, 2009. 10:56] 17) Weber, A. (2006). 3D weather data visualization in Second Life. URL: [3rd Dec, 2006. 23:16] 18) Halley, E. (1686). An Historical Account of the Trade Winds, and Monsoons, Observable in the Seas Between and Near the Tropicks; With an Attempt to Assign the Physical Cause of Said Winds, Philosophical Transactions. 183, 153-168 (cited in Tufte, E.R. (2007)) 19) Ware, C. and Knight, W. (1995). Using Visual Texture for Information Display, ACM Transactions on Graphics, Vol.14, No. 1, 3-20 20) Ying Tang; Huamin Qu; Yingcai Wu; Hong Zhou. (2006). Natural Textures for Weather Data Visualization. IV 2006, Tenth International Conference on 5-7th July 2006, 741-750 21) Weather Underground. URL: 118.49143219&zoom=10&pin=Santa%20Monica,%20CA [7th Dec, 2009. 23:35] 22) BBC Weather. URL: [1st Dec, 2009. 13:45] 23) The Weather Channel (USA). URL: [3rd Dec, 2009. 13:43]

Oliver Tomlinson - Autumn term 2009


Sign up to vote on this title
UsefulNot useful