4. Standards views

Node Link Diagram view

Mouse Interaction Toolbar

This toolbar allows to select the mouse operation you want to perform. Operations are listed and explained, from left to right of the toolbar :

  • 3D Navigation : This tool enables the 3D navigation on a graph using the mouse movements (left button pressed); the available operations are: translate, rotate, zoom, zoom and pan. Translation is the default operation and can also be activated using the Arrow keys; rotation is activated using Shift key, zoom is activated using Ctrl key (Alt key on Mac), zoom and pan is activated using the wheel of the mouse (APPLE key on Mac). Warning, the last operation is 'mouse position centered'; i.e it attempts to translate the last 2D or 3D position of the mouse to the center of the view.

  • Get Information : when this operation is selected, if you click on an element of a graph (node or edge), Tulip displays all available properties of that node/edge using the Element tab of the Info Editor sub-window (see Section 3, “Info Editor”).

  • Rectangle Selection : Allows multiple elements selection. Elements within the selection box are selected. If Shift key is pressed, the newly selected elements are added to the current selection, if Ctrl key (Alt key on Mac) is pressed, the selected elements are removed from the current selection; else they replace the current selection.

  • Selection edition : This tool allows to modify the current selection. Available operations are horizontal stretch, vertical stretch, all axis stretch, coordinate axis rotation and translation. If no key is pressed, coordinates are modified. If Shift key is pressed, only coordinates are modified. If Ctrl is pressed, only size is modified. A left button click outside the selection box reset the selection.

    • Press on this 'circle' to rotate the selection.

    • Press on this 'triangle' to change width or height of the selection.

    • The 'square' is used both for resizing AND rotating the selection.

  • Magic Selection : It enables to select all the graph connected nodes having the same metric. It works like the magic selection in image editing software. The difference is the topology of the graph.

  • Zoom Box : It enables to zoom on a defined rectangle area. The first corner of the rectangle is defined when pressing the mouse left button, the opposite corner is defined when moving the mouse and the zoom operation is performed on the desired rectangle when the button is released.

  • Delete element : allows to delete a node or edge by a single left click. The deleted node or edge is the one under the mouse when you click.

  • Add node : when it is selected, you can add a node in the graph by a simple left mouse click on the current graph view. The node is placed at the coordinates corresponding to the mouse position when you clicked.

  • Add edge : when it is selected, you can add an edge in the graph by mouse left clicking first on the source node then any left click will add a bend to the edge until a left click on the target node.

  • Edit edge bends : when it is selected, you can edit the bends of an edge by first selecting the edge using the mouse left button. Then a mouse left click with the Shift key pressed will add a new bend, moving the mouse with the left button pressed will allow to move an existing one, a mouse left click on a bend with the Ctrl key pressed (Alt key on Mac) will remove it.

View window

The 3D graph view subwindow is the window where the graph is displayed. It can display graph in two or three dimensions and enables to apply the mouse operations selected in the tool bar by directly clicking on the drawing of the graph. If the user lets the mouse during few seconds on a node/edge, a tooltip window displays its id and label (use Options menu to enable tooltips).

Pop-up menu of graph view

This pop-up menu is displayed when pressing on the mouse right button (press Ctrl key when mouse pressing on Mac) :

  • View -> Redraw view : redraw the view,

  • View -> Center view : center the current graph in the view,

  • Dialog -> 3D Overview : display/hide top left overview,

  • Dialog -> Rendering parameters : open a dialog where you can modified graph rendering parameters,

  • Options -> Tooltips : enables the display of tooltips on nodes or edges,

  • Options -> Grid : shows the grid configuration dialog.

  • Save picture as -> ... : to save the graph picture in multiple format.

If you press right button of the mouse when your pointer is on a graph element, you have this context menu to perform simple actions on this element :

  • Add to/Remove from selection : this allows to change the selection state of the element,

  • Select : the current element replaces the whole selection,

  • Delete : this permanently removes the element from the current graph,

  • Go inside : if the element is a metanode, this shows the corresponding subgraph in the current view,

  • Ungroup : if the element is a metanode, this permanently removes it and its corresponding subgraph,

  • Properties : this shows the element properties in the Element tab.

Rendering Parameters

Parameters

All actions in this dialog are just performed for the current view window.

This dialog is displayed when clicking on the Dialogs->Rendering Parameters(Ctrl+R). Enables to configure the rendering of the graph. The available options are grouped in the following three frames:

  • Labels : the options in this frame only affect the display of the labels:

    • Type : this indicates the text display mode which can be one of Bitmap, Texture or 3D.

    • metric ordering : when checked the labels are displayed in using the viewMetric property decreasing order.

    • Density : use this slider to avoid having too much labels displayed (max is on the left).

  • Edges : this frame options affect the way the edges are displayed:

    • arrows : enables/disables the display of arrows.

    • 3D : enables/disables the display of edges in 3D.

    • Color interpolation : when checked the edge color is interpolated from the color of its source node to the color of its target node.

    • Size interpolation : when checked the edge size is interpolated from the size of its source node to the size of its target node.

  • Others : the options in this frame are related to general aspects of the rendering:

    • Orthogonal projection : enables/disables the orthogonal projection. If not checked, the perpsective projection is used.

    • Background color : enables to choose a color for the background of a graph view.

Layer Manager

All actions in this dialog are just performed for the current view window.

This dialog is displayed when clicking on the Dialogs->Layer Manager. Enables to configure the elements visibility and priority. The available options are grouped in two columns :

  • Visible : Visibility of the entity

  • Stencil : Priority to display the entity

In this menu, you see Hull entity, it represents the convex hulls of the graph. When you click on visible, a hierarchy of convex hulls is build. The name of a hull is the name of the coresponding subgraph.

In a future version you could add/modify/remove entity

Parallel Coordinates view

Introduction to Parallel Coordinates

Concept

Parallel coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data. The idea is to visualize a set of points in an n-dimensional space. To do so, the n dimensions are represented by n parallel axis, typically vertical and equally spaced. A point in n-dimensional space is represented as a polyline with vertices on the parallel axis. The position of the vertex on the i-th axis corresponds to the i-th coordinate of the point. The image below shows an example of a parallel coordinates plot for visualizing a set of 5-dimensions data.

History

Parallel Coordinates were firstly studied by Maurice d'Ocagne in 1885 [Ocagne1885] (mostly for 2-D use in Nomography) and were popularised by Al Inselberg [Inselberg85]. The first Multidimensional Coordinate System was developed by this last one in 1977 based on his independent rediscovery in 1959. Many people contributed to the development and popularization of Parallel Coordinates. Among them, Ed Wegman applied Parallel Coordinates to data exploration, and particularly visualize correlations in datasets. His landmark paper entitled "Hyperdimensional Data Analysis Using Parallel Coordinates" [Wegman90], published in 1990, is the starting point of concrete parellel coordinates applications. Today applications of Parallel Coordinates are in Collision Avoidance Algorithms for Air Traffic Control, Data Mining , Computer Vision, Optimization, Process Control, more recently in Intrusion Detection and elsewhere.

[Ocagne1885] “Coordonnées parallèles et axiales: Méthode de transformation géométrique et procédé nouveau de calcul graphique déduits de la considération des coordonnées parallèlles”. Maurice d'Ocagne. 1429700971. Cornell University Library. Copyright © 1885.

[Inselberg85] The Visual Computer. 0178-2789. Springer Berlin / Heidelberg. Copyright © 1985. 1. 4. . “The Plane with Parallel Coordinates”. Al Inselberg. 69-91.

[Wegman90] Journal of the American Statistical Association. 0162-1459. American Statistical Association. Copyright © 1990. 85. 411. . “Hyperdimensional data analysis using parallel coordinates”. Ed Wegman. 664-675.

The Parallel Coordinates View main window

This is the main window of the view where the parallel coordinates drawing is displayed. It is created as soon as the parallel coordinates view is requested via the Tulip main menu bar. After the view creation, the content of this window is empty and the view has to be setup via the configuration dialog.

The Parallel Coordinates View Configuration Dialog

The view configuration dialog is reachable via the view popup menu. To display it, do a right-click in the view window and select Dialog -> Configuration in the popup menu which appears. The configuration dialog is composed of two tabs entitled:

  • Data Configuration

  • Draw Configuration

The Data Configuration tab

This tab allows to configure the data to plot. Because the data source is a Tulip graph, the first thing to do is to precize from which graph elements, the nodes or the edges, the data will be retrieved. To do so, click on the appropriate radio button in the upper part of the tab. Next, the dimensions of the data to plot have to be selected. In our case, the data dimensions corresponds to the properties associated with the graph. At the present time, the graph properties that can be selected to be visualized with the parallel coordinates representation must have one of the following types : Metric, Integer or String. Each selected dimension will be mapped to an axis in the parallel coordinates representation. The dimensions selection is done on the lower part of the tab. To add a dimension to plot, click on one of them in the list on the left (entitled "Properties to hide") and move it in the list on the right (entitled "Properties to display") by clicking in the right arrow button or by drag and drop it. To remove a dimension, click on one of them in the list on the right and move it in the list on the left by clicking on the left arrow button or by drag and drop it. The selected dimensions can also be ordered by picking one of them in the list on the right and then by clicking on the up arrow button or the down arrow button to change the property position in the list. In the drawing that will be generated, the colors of the lines between axis will be those stored in the "viewColor" graph property. If the data source is the nodes of the graph, the shapes of the points on axis will be those stored in the "viewShape" graph property.

The Draw Configuration tab

In this tab, many parameters relative to the parallel coordinates drawing can be set. Let's make a review of them.

  • General draw parameters

    • Background color : allow to set the view background color. To do so, click on the colored button and pick a color in the color dialog which appears

    • Axis Height : allow to set the height of the different axis

    • Space between axis : allow to set the space between the different axis

    • Lines color alpha value : allow to set the transparency level of lines representing data. The minimum value is 0 (totally transparent) and the maximum is 255 (opaque)

  • Draw points on axis

    If this group box is checked, points corresponding to dimensions values on axis will be drawn. This option is desactivated by default when the number of data to plot is greater than 5000 in order to speed up the rendering process. The size of points on axis is proportionnal to the "viewSize" property value. The minimum and maximum point size can be set freely by using the spinbox contained in the group box. The minimum "viewSize" value will be mapped to the minimum point size and the maximum "viewSize" value will be mapped to the maximum point size.

  • Apply texture on lines

    If this group box is checked, a texture will be applied on the lines representing data. Two choices are proposed :
    • Use Tulip default texture : use the default parallel coordinates view texture proposed by Tulip. This texture is applied on the alpha channel of the lines colors.

    • Use texture from file : apply a personnal texture from an image file (width and height of the image must be a power of 2)

Tulip Parallel Coordinates View Interactors

To play with the view, a few number of interactors can be found in the following toolbar :

Let's introduce them and their functionnalities.

  • View Navigator : This interactor enables the 3D navigation on the view using the mouse movements (left button pressed). Its working is the same as the 3D Navigator interactor from the Node Link Diagram Component (see Node Link Diagram 3D Navigator).

  • Zoom Box : This interactor enables to define a zoom area with the mouse. Its working is the same as the Zoom Box interactor from the Node Link Diagram Component (see Node Link Diagram Zoom Box).

  • Show Element Properties : This interactor allows to view the properties associated to an element by clicking on it. Tulip will display all available properties of that node/edge using the Element tab of the Info Editor sub-window (see Section 3, “Info Editor”)

  • Elements Selector : This interactor allows to select elements in the parallel coordinates view. Its working is the same as the Rectangle Selection interactor from the Node Link Diagram Component (see Node Link Diagram Rectangle Selection).

  • Element Deleter : This interactor allows to remove from the parallel coordinates view all the elements under the mouse pointer after a left-click.

  • Element Highlighter : This interactor allows to highlight elements in the parallel coordinates view. When an element is highlighted, it keeps its original color and the other elements are colored in gray. A left-click in the view will highlight all the elements under the mouse pointer. It is also possible to define a rectangular region with the mouse to highlight all elements in that region. If there is no elements under the mouse pointer while clicking, the whole highlighted elements set will be reseted and all elements will get back its original color. By maintaining the Shift key while clicking, the elements under the mouse pointer will be add/remove from the current highlighted elements.

    Below is an example of the element highlighter interactor result. Image on the left shows a parallel coordinates view without highlighted elements. By clicking on the element that has the maximum value for the "#hands" dimension, it will be highlighted and the result is shown on the image on the right.

  • Axis Swapper : This interactor allows to swap two axis with the mouse in the parallel coordinates drawing. To do so, put the mouse pointer under the axis you want to swap, a translucent blue rectangle will be drawn to indicate that you can click to move the axis. Once the pointer is under the axis, do a left click and keep the mouse button pressed while you're dragging the axis. To swap the axis with an other, release the mouse button when a translucent green rectangle appears around the other axis to swap. The image below illustrates this process.

  • Axis Sliders : This interactor allows to select a range on a particular axis with the help of sliders and highlight all the data located in that range. This operation allows to filter data according to a certain dimension. To use the axis sliders, put the mouse pointer under the one you want to move (the slider outline color will change), do a left-click and drag the slider along the axis. Release the mouse button when the slider is at the wanted position, the data located between the two axis sliders will be automatically highlighted. The sliders of the axis whose range has been modified will be colored in blue to indicate on which dimension the data filtering is made. The other axis sliders will also move automatically to show in which ranges the highlighted data are included on the other dimensions. It is also possible to drag the range defined by two axis sliders, by putting the mouse pointer between them (a translucent rectangle will appear) and drag and drop it along the axis. The image below shows the result of this interactor after filtering data on the "#hands" dimension.

  • Axis Box Plot : By enabling this interactor, a box plot will be drawn above each quantitative axis. In descriptive statistics, a boxplot (also known as a box-and-whisker diagram or plot) is a convenient way of graphically depicting groups of numerical data through their five-number summaries (the bottom outlier, first quartile (Q1), median (Q2), third (Q3), and the top outlier). The image below illustrates the way to read a box plot.

    A boxplot may also indicate which observations, if any, might be considered outliers. The boxplot was invented in 1977 by the American statistician John Tukey. Boxplots can be useful to display differences between populations without making any assumptions of the underlying statistical distribution. The spacings between the different parts of the box help indicate the degree of dispersion (spread) and skewness in the data, and identify outliers.

    It is possible to highlight data included in the following axis box plot range :

    • [Bottom Outlier, First Quartile]

    • [First Quartile, Median]

    • [Median, Third Quartile]

    • [First Quartile, Third Quartile] (= interquartile range)

    • [Third Quartile, Top Outlier]

    To do so, put the mouse pointer between the two bounds of the wanted range, a translucent rectangle will be drawn to indicate it is selected, and do a left-click to highlight data. To highlight the data included in the interquartile range, put the mouse pointer near the median line and the interquartile range will be selected. The following screenshot illustrates this interactor.

The Parallel Coordinates View popup menu

By right-clicking in the parallel coordinates main window, a popup menu will be displayed. The content of it depends on the location of the mouse pointer. By default, the following menu is displayed :

The entries it contained are the following :

  • Dialog -> Configuration : Display the parallel coordinates view configuration dialog

  • View Setup -> Center View : Center the parallel coordinates drawing inside the view main window

  • View Setup -> Classic View : By clicking on this menu entry, the parallel coordinates will be drawn the classic way with straight lines between axis. This view mode is the default one.

  • View Setup -> Spline View : By clicking on this menu entry, the parallel coordinates will be drawn with bezier curves between axis. Beware because this view mode is not optimized for performance, the drawing computing and the rendering process can be really slow if there's more than a thousand of data to plot.

  • Options -> Tooltips : By enabling this option, when the mouse pointer is under an element a tooltip message will be displayed containing the element label (if there is one set in the "viewLabel" property) and the element id.

If there is highlighted elements in the drawing (set with the elements highlighter or the axis sliders interactors), the following menu entries will be add to the view popup menu.

  • Select Highlighted Elements : By clicking on this entry, all the current highlighted elements will be added to the selected elements set.

  • Reset Highlighted Elements : Empty the highlighted elements set. All elements will get back their original colors.

If there is an element under the mouse pointer when right-clicking, the popup menu will contain additional entries introduced below.

  • Add / Remove From Selection : Add or Remove the pointed element to the selected data set.

  • Select : Empty the selected data set then add the pointed element to it.

  • Delete : Delete the pointed data.

  • Properties : Display all the available properties of the pointed data in the Element tab of the Info Editor sub-window (see Section 3, “Info Editor”).

Eventually, if there is an axis under the mouse pointer, the popup menu will contain the following menu entries.

  • Axis Configuration : By clicking on this entry, a dialog will appear to set some axis parameters. The content of this dialog depends on the axis type.

    • For the Quantitative Axis (axis associated to a property whose type is Integer or Metric), the displayed dialog is the following :

      This dialog allows to set the number of axis graduations, the axis order (if it is ascending, the minimum value will be at the bottom of the axis and the maximum one at the top) and it is also possible to set a logarithmic scale (in base 10) for the axis.

    • For the Nominative Axis (axis associated to a property of type String), the dialog is the one below :

      This dialog allows to define the axis labels order. To move a label at a certain position, click on it in the list at the center of the dialog and move it to the wanted position with the help of the arrow buttons on the right side of the dialog.

  • Remove Axis : Remove the axis from the parallel coordinates drawing.

Table view

In this view you can visualize graph properties in a table form.

You have two tabs : Node and Edge.

Color of a cell depends on the value of the viewColor property of the node/edge and the color of the text depends on the value of the viewLabelColor property of the node./edge