Data Visualization Documentation

Introduction

The Data Visualization Framework provides the functionality to create and visualize a number of different interactive charts. It consists of two distinct applications / portlets that work complementary.
The first one is available to the administrators who are able to create configurations for new data visualizations and the second one is displaying the configured visualizations on top of the imported data.

Currently, the following chart types are available:
1.Spline / Scatter / Bar / Line / Step
3.Pie
4.Doughnut
5.Polar
6.3D Scatter
10.Graph
11.MindMap
12.Tree
13.Map
14.World Wind Map
15.Table
16.Heatmap

Configuration Application

In order to create and review the existing charts of several the configuration portlet should be used.
In the following three screenshots the functional interface is displayed in order to create the desired chart.

Screen 01 for administering generic visualization and graph production
Figure 1: "General" option to administer visualization attributes

Screen 02 for administering generic visualization and graph production
Figure 2: "Data" option to administer visualization attributes

Screen 03 for administering generic visualization and graph production
Figure 3: "Filters" option to administer visualization attributes

The visualization of graphs/charts offers two main functionalities: the creation of new charts and the management of the existing ones.

Create Graphs/Configuration

Create_graph
Figure 1: Create graph

General

In this tab you are asked to complete information about the general characteristics of the graph. All fields marked with an asterisk ('*') are mandatory.
General
Figure 2: General tab

Label*

The title of the graph.

Description

Optional description to accompany the graph.

Type

Choose which visualization type you need to create. The default value is the Line type, while the available types in the dropdown list include: Spline / Scatter / Bar / Line/ Step / Pie / Doughnut / Polar / 3D Scatter / Graph / MindMap / Tree / Map / World Wind Map / Table.

Available Types

You may choose from this optional multi-select dropdown from none to all. Once clicked you are in place to dismiss your choice by clicking the "x" sign on the right side within the button. The available types include: Spline / Scatter / Line / Step.

Group By

Once uploaded the input file, you may choose to group by the selected field through an optional dropdown.

X Axis*

Once uploaded the input file, you have to choose one available field for the 'X' axis notation through a mandatory dropdown.

X Axis Label*

Mandatory description for the 'X' axis.

Y Axis*

Once uploaded the input file, you have to choose one available field for the 'Y' axis notation through a mandatory dropdown.

Y Axis Label*

Mandatory description for the 'Y' axis.

Color

Select one field from which you refer to optionally pick colors.

Data

Here you are in place to either drop a file or click to select one through the file explorer (in a forthcoming stage the file explorer will be triggered within the VRE).
Data
Figure 3: Data tab

Filters

You may filter the review of the graph, adding ('+' symbol) or deleting ('-' symbol).
Filters
Figure 4: Filters tab

Label

Optionally insert description for the filter used.

Field

Optionally select one field to apply the filtering on.

Type

Optionally select the type for choosing the filtering (either Checkbox List or Dropdown.

Required

By selecting this optional checkbox, the user is prompted to make the filter(s) required for the user.

Transformations

Transformations
Figure 5: Transformations tab

Attribute Column

[optional. ???]

Value Column

[optional. ???]

Columns

[optional. ???]

Documents

Documents
Figure 6: Documents tab

Document

Optionally select the field to reference while uploading accompanying files ???

Charts Visualization

This obligatory drop down offers the ability to select any of the available charts. In case there is no chart already created, "none" indication is shown.
View
Figure 7: View existing Graph, print and configure

Independent of the chart's type users have the following options:
Save: By selecting this button the current chart visualization is saved as a ".png" file to your file system.
Configure: By selecting this button the current graph is opened in edit mode with all configurations properly pre-selected.

Line Chart Visualizations

Line Chart Visualization with Multiple Images as points

Data Definition:

In order to setup a Line chart with multiple images your data must have two dimensions for the x,y axis and one more field for the document reference. For the data upload you have to create a zip file with your CSV data file and the document files.

Here is a configuration example :

Τhe values of the header of the data are:

seedLot, Ref, genotypeAlias, scenario, repetition, rawPosition, date, plantHeight, myDate, day, fileName, document

Values:

xAxis: position
yAxis: line
document reference: document

In this tab you can define the connected document field (from your data header values) and the max number of the active documents.(1-5)

So in the above example we have a Line chart with connected documents, for comparing the height of the plants over time.

HeatMap Visualization

Data Definition:

In order to setup a HeatMap chart your data must have three dimensions for the x,y,z axis and one more to setup a filter for comparing multiple Heatmaps.

Here is a configuration example :

Τhe values of the header of the data are:

seedLot,Ref,genotypeAlias,scenario,repetition,date,plantHeight,myDate,day,position,line.

Values:

xAxis: position
yAxis: line
zAxis: Plant height

Values:

filterValue: myDate

So in the above example we have a HeatMap over time, for comparing the height of the plants in combination with position and line.

heatmap.png (65.1 KB) Chris Mitatakis, Mar 21, 2019 02:42 PM

heatmap_config.png (24.9 KB) Chris Mitatakis, Mar 21, 2019 03:44 PM

heatmap_config.png (24.9 KB) Chris Mitatakis, Mar 21, 2019 03:56 PM

heatmap_filters.png (17.1 KB) Chris Mitatakis, Mar 21, 2019 03:57 PM

plant_images.png (196 KB) Chris Mitatakis, Mar 26, 2019 11:31 AM

plant_images_config1.png (28.6 KB) Chris Mitatakis, Mar 26, 2019 11:31 AM

plant_images_config2.png (10.5 KB) Chris Mitatakis, Mar 26, 2019 11:31 AM