2. Home page

Home is the landing page of the platform. The startup screen provides a quick overview of published and private stories (if registered).

Before getting into stories, this chapter focuses on data and how data take the form of interactive layers. Stories and slides are discussed in “Stories”.

Fig. 2.1 Welcome to Vizlab

2.1. Data exploration

Click on Create your own story to access the main page of the application with the core features to view, edit and create stories.

The page features are visually grouped into these sections :

• The Story Settings

• The Slides section to manage the slides that compose a story.

• The Layer section to manage the layers inside a slide.

• A 3D Viewer on the 3D model of the Earth. This is where the layers appear on the Earth Surface.

• A Timeline to keep track of data evolution over time.

• The Settings Panel containing settings for slides and layers.

Fig. 2.2 Home page

Slides and Layer sections, timeline, and settings can be collapsed to fully reveal the 3D viewer.

2.2. 3D Viewer

This is where the 3D globe is shown and navigation it’s possible by directly interacting with the 3D model.

You can navigate around the globe by dragging with the left click and use to mouse wheel to zoom in and out.

Vertically dragging with the right click allows for a more precise zoom.

Fig. 2.3 Viewer with a map layer (2m temperature)

2.3. Timeline

The timeline allows to track the evolution of layers over time. Layers appear in the upper area of the timeline.

Fig. 2.4 Timeline panel

Timeline can be navigated back and forth by dragging inside the upper area.

The bar in the lower area marks the selected time instant, which can be changed by clicking on the area or dragging the bar.

Zoom the size of time interval displayed in the timeline, can be achieved with the mouse wheel while hovering on the lower area.

Set Time Window displays a panel to set the start and end date of the timeline view.

The timeline also acts as a player for layers, allowing to play them using the Play, Step Backward, and Step Forward buttons. When stepping backward or forward, the timeline moves to the previous or next instant according to the defined Time Step. It’s also possible to adjust the Playback Speed as needed, and Loop the playback.

Note : some layers may not be optimized for playback, which can affect how smoothly they are played. The presence of unoptimized layers is warned at the bottom of the layers panel, and they are marked with a magenta stripe on their left side. For maximum speed, it’s recommended to hide or remove them before playing the timeline, if possible.

Fig. 2.5 Highlighted unoptimized layers

Fig. 2.6 Unoptimized layers warning

2.4. Layers

Layers visually represent data on the Earth at the corresponding time and location.

Fig. 2.7 Viewer with one map, one stream and one volumetric layer

The creation of a layer is the result of transforming original data into a visible representation, therefore adding a layer requires some data to start from.

This is why the platform provides a way to explore datasets before using them, the Data Offer tool.

2.5. Data Offer

Clicking on the + button opens up the Data Offer panel to browse the available data.

Data entries in the list are identified by their sub-dataset and dataset names, and marked with their source type and time resolution.

Time resolution can be hourly (H), daily (D), weekly (W), monthly (M) or yearly (Y) and multiple of those (For example 12H, 3D).

Fig. 2.8 Data offer Panel

Click on the info button “i” to see datasets details

Fig. 2.9 Info

2.5.1. Data hierarchy

Datasets are categorized in data type categories. Each category groups different data types, and each data type can have multiple data visualization. This hierarchy is is shown in the following scheme

Fig. 2.10 Data hierarchy

The data type hierarchy in detail:

Map - A raster representation of the data, made of a single 2D component. The two dimensions represent longitude and latitude.

• WMS – Data from web map services

  • Colored tiles – Precolored images directly rendered on the surface

    

    Fig. 2.11 Colored tile

• IMG – Georeferenced images and videos

  • Colored images – Images with fixed colors

    

    Fig. 2.12 Colored image (DestinE Streamer Video)

• GRD – Gridded data on a fixed-resolution surface

  • Customizable images – Colors defined through a color table

    

    Fig. 2.13 Customizable image

  • Histograms – 3D view with vertical columns whose height and color represent the value

    

    Fig. 2.14 Histogram

Flow - A 2D representation of vector data through its u and v components.

• VEC – Vector-encoded data

  • Streamlines – Animated lines rendered as a continuous flow

    

    Fig. 2.15 Streamlines

  • Arrows – Static arrows showing intensity (as length and color) and direction

    

    Fig. 2.16 Arrows

Volumetric - Representation of data as a volume with a single 3D component.

• VOL – Volumetric data

  • Maximum intensity projection volume

    

    Fig. 2.17 Maximum intensity projection volume

  • Direct volume

    

    Fig. 2.18 Direct volume

  • Isosurface volume

    

    Fig. 2.19 Isosurface volume

Try by yourself to see what is best for you.

Colored images visualization includes videos as well, because videos are treated as same layer type. WMS can be also added with Add External Source (WMS), providing the URL of the external source.

Fig. 2.20 Add external WMS

2.5.2. Data sources

Data Offer provides datasets from many different sources, but you can create your own datasets by uploading data from local storage (Upload your own data). Data you upload appear in the data offer among the other sources. See chapter “Upload Your Own Data” for more information.

Datasets from any data source can be directly added as layers, with the exceptions of CACHE-B. This source is notable because its data may be large and before usage are required to be extracted in smaller portions, called “data cubes”. Selecting the visualization type doesn’t immediately add the layer but redirects to specific submenus to select existing data cubes or create new ones. This topic is discussed in “DCMS Cache-B Data Access” chapter.

2.5.3. Filters

You can use filters for a quicker and easier browsing.

Data can be searched by name in the Search bar and filtered by parameters such as Data source, Visualization Type Category and Time Resolution. Additionally you can Filter Favorites. You can add a dataset to favorite with the star button on its list card. Data sources list include user uploaded data, under My Data.

Fig. 2.21 Search bar and filters

Date Range filter is equipped with a calendar widget to set the start and the end date. Region filter delimits the rectangular area visible on the layer.

Vizlab provides a convenient way to manually select the region of interest with the Draw Region tool.

2.5.4. Draw Region

Draw Region is accessible from the Region filter in the Data Offer panel, or when creating a data cube. For data cube creation, please refer to “DCMS Cache-B Data Access” chapter.

Opening the tool maximizes the viewer showing the gizmos to select the region :

• A blue semitransparent rectangle covers the maximum available region

• The region of interest is defined by a black and semitransparent rectangle and its coordinate labels

• Region of interest can be adjusted using the magenta-bordered selector, equipped with draggable handles

The region of interest is initially set to the default extension of the original dataset, with the selector fitting its area.

Fig. 2.22 Draw Region tool

Drag and drop selection, performed with the combination of SHIFT and pressed left button, can be done in three ways :

• Starting drag without touching any handle draws the selector from the starting point to the end of drag point.

• Dragging by one of corner handles allows for changing the selector size in place.

• Dragging by the center handle moves the selector without changing its size.

The selector can be freely extended anywhere on the globe but any portion outside max region is ignored. When not dragged, the selector always matches the area of the region of interest, even if empty (in that case the selector is hidden). It cannot be dragged by the center outside the max ragion, but it snaps to its edges when reaching the boundaries.

Known limitations of this tool :

• For volumetric dataset, the region of interest is capped (Check “Getting Started”)

• Selection through the 180th meridian is not supported

Beside drag and drop selection, the area can be set up by typing the coordinates in the bottom panel. Once done with the tool, the new values can be canceled or confirmed, provided the region is not empty.

2.6. Layers Management

Once a layer is added, it’s visualization appears in the 3D view on the Earth model, and its card visible in the layers panel. Layers can be renamed and reordered inside the list by grabbing them by the grid icon. Layers rendering order in the viewer follows their top-down ordering.

A layer card is equipped with buttons to manage the layer :

• Lock/Unlock

• Delete

• Compare

• Magnify Layer

• Time Offset

• Hide/Show

Fig. 2.23 Layer card

Magnify Layer matches the timeline view to the time interval of a layer. Upon magnification, the time bar is automatically placed at the start date of the layer.

If a layer doesn’t show up in the viewer, it may be due to the selected instant being out of interval, so magnifying might be needed.

Fig. 2.24 Timeline with magnified layers

If a layer uses a data cube, the additional Lock/Unlock button sets whether keeping a data cube in the personal storage. This feature, is described in “My Space”, while data cubes in general in “DCMS Cache-B Data Access” chapter. Compare, and Time offset are discussed in the next paragraph.

2.7. Compare mode

Compare mode is a useful feature for comparing different layers, which can help study changes of phenomena over time.

When this mode is enabled, the 3D view is split with a vertical line in two sides, that can be adjusted by dragging the line, layers partially rendered on one of the two sides.

Compare mode supports more than two layers, and works regardless layer visibility.

Fig. 2.25 Compare mode

2.7.1. Time compare

Sometimes you might want to compare data with different time span, or the same data a different instants, to check the difference between then and now. This can be done by adding a Time offset to a layer and then using the compare tool. If a layer has a time offset it appears in the settings panel and it’s marked on its timeline.

2.8. Layers Settings

Settings panel serves also as an inspector for layers, displaying settings and detailed information.

Layer settings affect appearance and vary depending on the dataset type categories, data types and data visualization :

• Map :

  • WMS

    • Colored Tiles

      • Opacity

  • IMG

    • Colored Images

      • Opacity

      • Video Quality | Available only for DestinE Streamer Videos, can be Medium or High

  • GRD

    • Customizable Images

      • Visualization Type | To switch between Customizable Images and Histograms

      • Color table

      • Color Table Range | Default or Custom. This setting is described below this list

      • Opacity

    • Histograms

      • Visualization Type | To switch between Customizable Images and Histograms

      • Color Mode

      • Color Table or Color if selected Uniform Color

      • Color Table Range | Default or Custom. This setting is described below this list

      • Opacity

      • Resolution

      • Vertical Scale

• Flow :

  • VEC

    • Streamlines

      • Visualization Type | To switch between Streamlines and Arrows

      • Color table

      • Opacity

      • Advanced Settings :

        • Drop Rate | The frequency of lines fading out

        • Fade Opacity | How rapidly the line trails fade out

        • Fade Color

        • Timestep | This influences the movement speed

        • Line Width

        • Particle Height | The elevation of the streams from the surface

        • Max Particles

    • Arrows

      • Visualization Type | To switch between Streamlines and Arrows

      • Color Mode

      • Color Table or Color if selected Uniform Color

      • Opacity

      • Resolution

• Volumetric :

  • VOL

    • Maximum Intensity Projection, Direct, Isosurface | Same settings for all volumes

      • Visualization Type | To switch between Maximum Intensity Projection, Direct, Isosurface volumes

      • Color table

      • Opacity

      • Value | To change the range of the data values

      • Clip Lon

      • Clip Lat

      • Clip Alt

Color Table Range purpose : Normally numeric data is visualised with a color table that maps values to color based on min and max values. To ensure meaningful comparisons between different data using the same color table, these min and max values must be consistent across datasets. If they differ, these parameters can be adjusted to align the color mapping.

Fig. 2.26 Map settings for WMS - Colored tiles and IMG - Colored images (image only)

Fig. 2.27 Map settings for IMG - Colored images (DestinE Streamer Videos)

Fig. 2.28 Map settings for GRD - Customizable Images

Fig. 2.29 Map settings for GRD - Histograms

Fig. 2.30 Volumetric settings for VOL - All volumes

Fig. 2.31 Flow settings for VEC - Streamlines

Fig. 2.32 Flow settings for VEC - Arrows

2.9. Additional features

On ther top right you find the Sign-in button, to register or log-in, along with the buttons for help, info, and graphic settings.

- Help button redirects to a picture with an overview of the main Vizlab features (Also available in “Getting Started”).

- Info button contains links to Documentation, API, Support and Terms and Conditions.

- Settings button opens a collapsible menu with the general graphic settings.

Fig. 2.33 Buttons at the right side of the top bar

Fig. 2.34 Info button with options

2.9.1. Graphics settings

A brief overview of the graphic settings with their description :

• Globe Lighting - toggles the globe lighting display

• Skybox - toggles the skybox display

• Show Atmposphere - toggles the atmosphere display

• FXAA anti-aliasing

• HDR

• Surface Transparency

• Display FPS - toggles the display of the Frame Per Second (FPS) count

• Performance tuning - this slider can increase or decrease the rendering resolution

• Terrain Provider: Enables 3D elevation data on the globe, allowing you to see mountains and topography instead of a smooth sphere.

• 2D Map: Switches the viewer from a 3D globe to a flat 2D map projection (Mercator), useful for traditional cartographic analysis.

• Earth Rotation (Timeline based): Automatically rotates the Earth model in sync with the timeline to simulate the day/night cycle based on the selected data time.

• Reset settings - to set every other setting back to default

Performance Tip: If the application feels slow or frames-per-second (FPS) drop, try disabling these experimental features or adjusting the Performance tuning slider.

Fig. 2.35 Graphic settings