1. Introduction

The SkyGraph project [1] had the goal of visualizing a full year's wind data over Costa Rica. A matrix of 41x41 data items, with 11 levels of height (or isobaric layers), was showed for each month, during 12 months. Each month counts 18,491 data items, for a total in the year of 221,892 vectors.

With this amount of data to visualize in the same interface, the problem of occlusion and focus+context became critical; the focus+context, for example, is a widespread situation when you have a large amount of data. If you want to see the big picture, you lose the detail, and if you're going to observe the detail, you lose the context. It is a design challenge to try to keep both levels balanced or otherwise to go from one to another level in a fluid and intuitive way. Figure 1 shows a month of data.

 

Fig. 1. 18,491 data items showing different wind speeds in different isobaric layers over Costa Rica for January 2014

 

For meteorologists working with these kinds of data, it is essential to carry out some particular observations as the climatic conditions depend on them significantly. Features such wind speeds, whether it is up or down and the influences between them, are part of these characteristics to observe.

In a visualization like the one in figure 1, it is not possible to accomplish any of these tasks. Because of this, the most significant contribution of this work was the design of a visualization that allowed the dosing of the data so that these three tasks were possible at different levels of detail and showing potential synergies between the data.

2. Related Works

In this field, the meteorologist uses weather maps, vertical cross-section, and a multitude of meteorological diagrams to depict the data [2]. SkyGraph applies vertical cross-section and directional arrows to represent the wind data.

Some of the most famous references in the area of visualization of wind speed fields are those of Windy (https://www.windytv.com) or the Google Brain Team (http://www.bewitched.com/windmap.html) (figure 2). However, both are representations in 2D, and in the case of Windy, the sampling is weak.

 

Fig. 2. Most popular types of representations, showing wind speeds and directions in a two-dimensional plane (https://www.windytv.com) on the left and (http://www.bewitched.com/windmap.html) on the right side.

 

Although Po Liu et al.[3] work with meteorological data for visualizing cyclones, to develop their work, they use the platform World Wind (NASA: https://worldwind.arc.nasa.gov). To represent the wind, they use arrows, each arrow point in the flow direction, and its length represents the wind speed. Besides, they use color to emphasize higher or slower speed.

The interface is in 3D. However, the arrows representation only indicates the direction flow and speed, in latitude and longitude, ergo 2-Dimensional.

In our case, we use directional arrows entirely in 3D to depict the wind field, and we use two different chromatic scales to accentuate unit characteristics of speed directions.

Another work is Met3D [2]; it is a tool for interactive three-dimensional visualization of numerical ensemble weather prediction. However, it is a prediction tool; this presents some aspects to demonstrate the feasibility of using visualization for forecasting.

Unlike SkyGraph, Met3D potentializes the use of different views on its interface. It tries different environments and applies a bridge from 2D and 3D to help to forecast transition to the 3D environment, on the other hand, SkyGraph uses a single overview but allows the user to fully control the point of view both in direction and scale.

Only the work of Li, Yang, Li and Zheng [4] focuses in small areas. They developed a model to visualize of local wind field based on forest-fires forecasting using microscale wind to improve the accuracy of the simulation.

A similar approach is taken within a further study of Huynh, Wang, and Williamson [5], who use a 3D wind field model (3DWF). This project created a new system to show wind vector profiles at specific locations, wind vector fields according to surface terrain, wind speed contours in both horizontal and vertical cross-sections, and wind speed contours according to surface terrain. Nonetheless, these developments did not enable the simultaneous visualization of multiple layers, nor any animation of wind, both of these absent functions were outstanding requests from scientists.

One of SkyGraph's primary aims is to deliver information on the vertical component of wind. Horizontal and vertical flow explains the divergence or convergence of winds and the probability of fair weather or precipitation, as water molecules reach higher atmospheric layers, they cool and condensed, causing rain.

Héas et al.[6] reconstructed 3D fluid motion obtained from a monocular sequence of images. Their work utilized a 3D graphical interface, proposing a visualization of both vertical and horizontal components within the displacement of individual wind layers. Nevertheless, when seeking to correlate data, this visualization implied a high cognitive load with major occlusion issues.

Most of the works, we found, utilize the data to simulate phenomena for forecasting new events; on the other hand, SkyGraph uses the data to depict the reality in a period.

Datasets used to support this 3D wind visualization system are derived from computational models, by way of reanalysis. The reanalysis of the data draws upon satellite imagery, direct measurements, and theoretical prediction models. It combines these data to create a dataset that sits in line with the proposed motion equations. This data facilitates an initial attempt at visualizing currents over Costa Rica, examining the different atmospheric layers and scrutinizing their correlation with the relief below them.

The following elements were considered to select data for use in this project:

· The number of pressure levels: This indicates the number of measurements made at different heights within separate atmospheric layers, according to associations between altitude and atmospheric pressure.

· Temporal resolution: This specifies the number of measurements taken within every 24 hours and the age of any historical data used.

· Spatial resolution: This is the number of locations on a single plane at which three wind components are measured. Every examination generates an automatic, uniform grid of locations, marked by their latitude and longitude.

SkyGraph was developed in response to specific needs highlighted by the scientific community within Costa Rica and, more specifically, local meteorologists. As such, its conception and creation considered elements of the theory of perception [7] as well as cognitive theory [8]. Further, it considered elements of interaction taxonomy [9] —namely: selecting; filtering; connect/relate; abstract/elaborate; and overview/explore.

3. Visualization Design

3.1 Objective Questions

As previously indicated for scientists, it is of significant importance to fulfill such tasks as:

1. To observe the behavior of wind speed fields in time and space.

2. To know correctly whether these velocity fields are ascending or descending.

3. To understand the possible influence of one isobaric layer on another.

The challenge was to make a visualization that would allow these features to be seen with a large amount of data present. These requirements were taken as the "Objective Questions" of the project following the methodology of "Definition of the visualization paradigms" [10].

3.2 Displaying with boids/automata

With aforementioned tasks in mind, the first attempt made was to represent the wind velocity fields through "boids" (low intelligence automatons), which is a similar way to that seen in state of the art. These automatons read their position and direction from a velocity/vector field that was generated by the data. Thus, the automatons traverse the entire area moving with guidance of wind speed in those specific quadrants, Figure 3.

 

Fig. 3. Animation: The figure shows a moment in the animation where the small purple triangles (the boids) follow the grey arrows representing the wind directions in each quadrant.

 

Based on this strategy, these boids were represented for the first time. Figure 4 shows an image with a first representation in the form of lines. The length of the lines corresponds to the magnitude of the velocity vector at each geographical point, and each line explicitly shows velocity at that moment.

 

Fig. 4. Visualization of the velocity field in the form of boids represented by lines with corresponding direction and magnitude.

 

Although the characteristics of the lines were defined by the direction and magnitude of each velocity field vector, it was evident that this type of representation was not sufficient to clearly show how that boid moved three-dimensionally across the map.

So the next step was to try to make the direction of the arrow more evident because the tasks required by the scientists included being very clear about the course of the winds at all times. For this, a "head" was added to each cone-shaped arrow.

 

Fig. 5. Visualization of Boids/Automata, in the form of arrows, in this case, the tips of the arrows are cones, which were some exhaustive in rendering time.

 

The results are better than the previous representation. However, it is not yet sufficient to show the movement in three dimensions.

With this unresolved, work was done to add "tails" to the boids, that is, appendices that would move clearly when the boids changed direction, in the hope that this movement would make clear the changes of direction in three-dimensional form. Besides, the color of the boids was changed by coding the color according to speed, the faster they go, the reds become, the slower the greens and the yellows become the intermediates. Figure 6 shows the result of this hypothesis.

 

Fig. 6. Visualization of boids with tail and chromatic coding.

 

To achieve this chromatic codification, we rely on the equator of Küppers [11][12], that corresponds to the Hue-Saturation-Value color model. With this frame of reference, it was defined how the colors should be chosen according to the RGB chromatic channels (see figure 7).

 

Fig. 7. The behavior of RGB channels as they go through the Küppers equator.

 

Figure 7 (bottom) shows the RGB channels and how they range from 0 to 255 (the bottom end of the chromatic scale starts from a minimum color intensity (null = 0x00), goes through a medium color intensity (medium = 0x80 [128 decimal]) until it reaches a maximum color intensity (saturated = 0xFF [255 decimal]). The upper part shows the resulting color in each combination. As it is the equator of the Küppers rhombus [13], all colors are at their maximum saturation without variations in brightness or quality.

3.3 Arrows instead of boids

At this point in the project, it was decided, in conjunction with the scientists and the iReal team, that this model does not work well for 3-dimensional velocity fields. It works very well in two dimensions, as we saw in state of the art looking at the winds from above, but when you want to know if the vectors go up or down (one of the primary tasks for the domain), this type of representation fails to make this movement clear. The boids navigating by themselves move very little in the z-axis, and therefore if their action is ascending or descending, it isn't effortless to identify that way.

The focus was changed to a complete matrix of arrows. In this new approach, the arrows are always in the same place, and their magnitude and direction are defined by the force of the wind in that quadrant or vector field. Figure 8 shows an example of this approach.

 

Fig. 8. Visualization by making arrows whose length responds to the magnitude of the vector represented and using the chromatic coding.

 

In this attempt, we used the chromatic scale defined in the previous section. As can be seen in figure 8, the results are better than the previous ones. The scientists, who agreed with this option, were consulted again, however, only in a few points of view or in very obvious arrows of a positive or negative slope can the differences in the "Z" component of the wind direction. With small forces/arrow and close to Z = 0, the definition of whether the slope is positive or negative remains challenging to observe.

3.4 Use of plans instead of arrows, a wind geography

From the previous approach came the idea of generating a surface that would show these "altitudes, creating something like a "geographical map" with the velocity field. See figure 9.

 

Fig. 9. Coding of several isobaric layers in the form of surfaces according to the velocity field.

 

As can be seen in Figure 9, the "wind surfaces" also help. However, the concept of magnitude is lost and sacrificed for that of direction. The "Z" component of the trends is better seen, but it is no longer so clear where the wind is fastest (the magnitude) or in which "X/Y" direction it moves.

The obvious answer seemed to be the combination of the surfaces with the arrows, i.e., the mix of the proposals in figures 8 and 9 together.

 

Fig 10. The two previous proposals: arrows and surfaces together.

 

Definitely, this proposal evidences much better the "geometry" of that "geography of winds" now is much clearer, how the winds move in direction and intensity. However, the scientists consulted argue that the "Z" component of the direction remains difficult to visualize.

3.5 Chromatic Scales

It was decided to try two chromatic scales, one for negative slopes and one for positive ones to try to make clear whether the "Z" component of the speed is negative or positive.

To design this, we went back to Küppers' Equator [12] [13] [14], to define which scales would be most suitable to show this difference. In this case, it was decided to use two scales to differentiate winds that ascended from those that descended.

Figure 11 shows the six proposals for complementary color ranges that were initially considered.

 

Fig. 11. Complementary palettes studied to differentiate between positive and negative slopes of forces.

 

Several implementations were made and tested with these chromatic scales; it was decided to use the scales shown in composition A in figure 11. The reasons for preferring this option were three:

1. Between the two proposals, it is easy to differentiate without error if a color belongs to one or another scale.

2. The colors in each palette are quite smooth in their degradation, so it is clear which one is more intense and which less.

3. It is possible to make a semantic association between "good weather" the green-yellow scale and "bad weather" the blue-violet scale.

This last characteristic was also requested by scientists because, in general, winds with positive slopes tend to generate rain, and winds with negative slopes tend to generate sunny days. These are the so-called low-pressure areas (the ascending slopes) and the high-pressure-areas (the descending ones).

Figure 12 shows this difference clearly. In the upper part of the picture, you can see the new color-coding with two scales, one for ascending and one for descending slopes. In the lower part of the figure, you can see the previously implemented scale that only codes the magnitudes of the forces.

In the upper part with the new scales, you can see three zones separated by their blue tones (downwards) and the yellow tones (upwards). In the lower part of the figure, on the other hand, the same set of data can be seen but with only one scale, and it is not possible to differentiate the slopes.

 

Fig. 12. The same set of data using the two chromatic tested scales.

3.6 Animation

In the previous step, it went a long way towards providing a solution to the tasks that the scientists had asked for (see the subsection 3.1 Objective Questions).

However, when there are several layers together, it is still not easy to see how one layer influences the other or to see how the geography of the country affects the behavior of the winds, so two more strategies were implemented.

The first one was to animate the arrows, following the initial idea of the boids, which moved through the whole territory, but this time applied to the arrows. In this case, each arrow would grow from its initial point to its final point accentuating, even more, the visibility of the direction and magnitude with which it moves. The figure 13 shows a case of this type of animation.

 

Fig. 13. Animation: Animation of the arrows showing the direction and magnitude of wind.

 

In this case, the evaluation of the scientists was very positive. Now it is possible to see the two characteristics of the wind speed field (direction and magnitude) clearly, and it is more obvious how the different isobaric capacities influence each other, as shown in figure 14.

 

Fig. 14. Animation: Two isobaric layers are showing how one influences the other and how both are influenced by the geography of the country.

3.7 Opacity and data profiles

To aid occlusion, because at any given time, there may be up to 120,000 arrows in the display, two new strategies were included in addition to the above: (1) opacity and (2) data profiles.

Opacity: We added an opacity slider with which the opacity of the planes and arrows can be changed depending on the needs. In this way, when there are a few data present, the user can increase the opacity of all, making the visualization more visible. Otherwise, if there is a lot of data present, the user can lower the opacity having a vision with more context than detail. Figure 15 shows the interface that was designed for this purpose.

 

Fig. 15. Interface showing the opacity slider, as well as the possibility to view or hide isobaric layers.

 

Data Profiles: Data Profiles is a strategy that was used in a previous project [14][3] on seismic data and that we proposed to CIGEFI scientists for this project. It consists of being able to cut the data in strips with vertical cuts so that only a cross-section of the data can be seen. With this technique, the data before or after the selected zone is eliminated from the visualization.

With the use of these profiles, surfaces, arrow animations, and color scales, it was straightforward and intuitive to answer the target questions posed from the start. Figure 16 and 17 show one of these data sections and how the arrows, surfaces, and colors look.

 

Fig. 16. Combination of the above strategies, including data profiles.

 

Fig. 17. Animation: Animation of the above strategies.

3.8 Technical background

This time our research group first performed an efficiency analysis on different platforms [15], comparing systems like:

· JAVA programming language more precisely its Processing 3.0 dialect (https://processing.org) (working at 100,000 data items but about 5 FPS).

· Javascript, specifically the Three.js library (https://threejs.org/) (stopped working at 10,000 data items).

· Apple Swift SceneKit programming language (stopped working at 100,000 data items).

None of the results were efficient enough for the needs of this project, so we decided to change the environment to a lower level and more efficient one.
For the selection of the new platform, we have taken into consideration:

· To be multiplatform: to run on Microsoft Windows, Apple macOS, and GNU/Linux operating systems.

· To run efficiently on average personal computers (to avoid scientists needing expensive computers to use the system).

· To be a stable platform with proper documentation.

· To be platform based on a widely-used programming language.

After considering some available options, we decided to work with Openframeworks (https://openframeworks.cc) , which is an open-source toolkit based on the C++ programming language. Behind this platform, OpenGL (https://www.opengl.org) is used for the 3D graphics engine.

The country's geography was generated from scratch using data from the PRIAS project of the National Center for High Technology in Costa Rica (CeNAT http://www.cenat.ac.cr/en/prias-en/). A ".ply" file was generated from this data, which, besides being a very efficient format due to its simplicity, is considered native to Openframeworks and, therefore, very agile in its loading and internal handling.

The wind data are loaded from 12 sets of arrays with ten .csv files, one for each isobaric layer, and is saved in memory through objects created in real-time. Charging the 221,892 vectors to display all data at the same time still achieves an efficiency of 30 FPS (frames per second), which would not be possible with the previously tested platforms.

For the navigation system, the algorithm based on the scheme known as "virtual sphere" was used with a customized approach by the iReal Research Group [17] that specializes in navigation in terrain or geographic situations.

4. Usability evaluation

As discussed throughout the article, the entire process was accompanied by the domain scientists. All the projects carried out by the iReal Research Group are done with the support of scientists specialized in the data being visualized. Our job is to solve their needs as we advance in each visualization.

With this philosophy, periodic meetings are held where not only the tasks imposed by the scientists are answered, but also new possibilities are opened along the way. At the same time, the visualization group shows new potential in this new work environment.

At the end of each iReal Group project, a heuristic test is done using similar questions in all the projects, some of them are:

· Which approach did they find more intuitive, this visualization, or the traditional approach?

· What would they prefer to use in the future?

· Which of the two methods they think is easier to use?

In this case, all users found this tool to be much more intuitive and easy to use than the traditional way of working that includes two-dimensional analysis at different heights separately. Also, all scientists found that the tool could be used with minimal or no training.

5. Conclusion and Future Work

The scientists at the research center have been very enthusiastic about the current work, and we are preparing to work on other projects such as historical visualizations of hurricanes in the Caribbean Sea area and three-dimensional visualizations of the behavior of a single hurricane, among others.

All the projects carried out by the iReal research group, from the Instituto Tecnológico de Costa Rica, are developed in the environment of a public university entirely financed with public funds. For this reason, this one, like the other projects of our group, is open to share and collaborate with any other research group in the world that wishes to do so.

The iReal group will continue to support these types of initiatives, contributing to the development and understanding of data available to scientists.

6. Collaboration acknowledgments

The research team would like to express their gratitude to the University of Costa Rica’s Center for Geophysical Research (CIGEFI) meteorologists who aided the development of this design-study and displayed great diligence and investment during our discussions.

Finally, we give thanks to the eScience research program to which our iReal Group belongs, which has supported this project in all aspects of its administration and funding.

7. References

[1] F. Hernandez-Castro, J.  Monge-Fallas, L. Rodríguez, D. Solís. Skygraph: visualizing Costa Rica’s winds. PONTE: International Scientific Researches Journal, 75 (4/1), April 2019.

[2] M. Rautenhaus,M. Kern, A.  Schäfler & R. Westermann . Three-dimensional visualization of ensemble weather forecasts–Part 1: The visualization tool Met. 3D (version 1.0). Geoscientific Model Development, 2329-2353, 2015.

[3] P. Liu, J. Gong & M. Yu. Visualizing and analyzing dynamic meteorological data with virtual globes: A case study of tropical cyclones. Environmental Modelling & Software, 64, 80-93, 2015.

[4] J. Li, L. Yang, X. Li & H. Zheng. Visualization of local wind field based forest-fire’s forecast modeling for transportation planning. Multimedia Tools and Applications, 1-15, 2016.

[5] G. Huynh, Y. Wang & C. Williamson. Visualization of Wind Data on Google Earth for the Three-Dimensional Wind Field (3DWF) Model (No. ARL-TR-6138). Army Research Lab Adelphi MD Computational and Information Sciences Directorate, 2012.

[6] P. Héas, K. Krissian, E. Mémin & A. Szantai. Reconstruction and visualization of 3D wind fields from satellite image sequences. In Proc. 2007 EUMETSAT Meteorological Satellite Conference–15 th AMS Meteorology and Oceanography Conference, 2007.

[7] S. E. Palmer. Modern theories of Gestalt perception. Mind & Language, 5 (4), 289-323, 1990.

[8] X. Tao. Research on information visualization design based on cognitive theory. In Design Management Symposium (TIDMS), 2013 IEEE Tsinghua International (pp. 123-126). IEEE, December 2013.

[9] A. Figueiras. Towards the understanding of interaction in information visualization. In Information Visualisation (iV), 2015 19th International Conference on (pp. 140-147). IEEE, July 2015.

[10] F. Hernandez-Castro, J.  Monge-Fallas. "What for: classification of visual paradigms.” PONTE: International Scientific Researches Journal, Vol. 72 | No. 7.  2016

[11] H. Küppers. Fundamentos de la teoría de los colores, 5a. Ed. Ed. GG., México. 1995.

[12] F. Hernández-Castro. Teoría del color (ingredients). Escuela de Diseño Industrial, Instituto Tecnológico de Costa Rica. Cartago, Costa Rica. 2016.

[13] J. Monge-Fallas & F. Hernández-Castro. An Intuitive 3D Interface for Defining Seismic Profiles by Plinius. PONTE: International Scientific Researches Journal, 74(4), 2018. doi: 10.21506/j.ponte.2018.4.9

[14] F. Hernandez-Castro, J. Monge-Fallas. Animation: Plinius: A Visualization System of Costa Rica's Tectonic Plates. Scientific Visualization. 2019;11(2): 73 - 87, DOI: 10.26583/sv.11.2.06.

[15] F. Hernández-Castro & J. Monge-Fallas. Eficiencia comparativa en animaciones en javascript (nota técnica). Tecnología en Marcha. Vol. 31-3. Julio-Setiembre 2018. Pág 143-150.

[17] F. Hernandez-Castro & J. Monge-Fallas. Navigation Sphere: Optimizing Virtual Sphere for Terrains Analyses. PONTE: International Scientific Researches Journal, 74(7), 2018.