visualization - 10 pavel slavík. env 2006 3.2 the screen space problem all techniques, sooner or...

VISUALIZATION - 10Pavel Slavík

ENV 20063.2

The Screen Space Problem

All techniques, sooner or later, run out of screen space

Parallel co-ordinates– Usable for up to 150

variates– Unworkable greater than

250 variates

Remote sensing: 5 variates, 16,384 observations)

ENV 20063.3

Brushing as a Solution

Brushing selects a restricted range of one or more variables

Selection then highlighted

ENV 20063.4

Parallel Coordinates

Brushing picksout the high MPGdata

GRAPH VISUALIZATION

Visualization Course OI5

What is a graph?


7© 2012 Prof. Dr. Franz J. Brandenburg

Graph Drawing

1

723

4

5

6

8

Synonyms: Graph network diagram schema map

1 2

34

5 6

78

3-D

1 2

34

5 6

78

planar

Information Visualization. Graph Drawing

Graph Drawing– Old topic, many books, etc.– May have other goals than visualization

• E.g. VLSI design

Graph Visualization– Size key issue– Usability requires nodes to be discernable– Navigation considered

Usage of Graphs


Example - Phone fraud


TREE VISUALIZATION


Tree visualization


Tree Maps


TreeMaps

Space-filling technique that divides space recursively

Segments space according to ‘size’ of children nodes

map of the market – smartmoney.com


Treemap applied to File System


Treemap Problems

Too disorderly– What does adjacency mean?– Aspect ratios uncontrolled leads to lots of skinny boxes

that clutter

Hard to understand– Must mentally convert nesting to hierarchy descent

Color not used appropriately Wrong application

– Don’t need all this to just see the largest files in the OS


Cone Trees

Tree layout in three dimensions

Shadows provide 2D structure

cone tree – robertson, mackinlay, and card


Hyperbolic Trees


Tree Visualization

• Ball-and-stick visualization: use the position and appearance of the glyphs

Rooted-Tree Layout of the FFmpeg softwareVisualization Course OI24

Tree Visualization

Radial-Tree LayoutVisualization Course OI25

Tree Visualization

3D Cone-Tree LayoutVisualization Course OI26

NETWORK VISUALIZATION

Visualization Course OI(27)

Goal

Visualize the data associated with a network– Understand data, not network themselves

Coping with large data volumes– Hundreds of nodes– Thousands of links– Data from time periods

Overcome the map clutter problem


Traditional Approach

To reduce cluttering of data (traditional)

– Aggregation: for large numbers of links or nodes

– Thresholding: for detecting changes


Internet traffic


Arc Map with parameterization of arc height

Add translucency of arc &, coloring and size glyphs of countries


Static Displays (LinkMap)

Focus on one Node (Oakland)Visualization Course OI32

Static Displays (LinkMap)

Include all nodes (10% of links shown)Visualization Course OI33

Example (zoom in Link Map)

Left: All line segments intersecting the display Middle: any line segments with at least one endpoint

in the display Right: only lines that both begin and end inside the

display


Network visualization

Often uses physics models (e.g., edges as springs) to perform layout.

Can be animated and interacted with.


Six Degrees of Mohamed Attahttp://business2.com/articles/mag/0,1640,35253,FF.html


Parameter classes

Statistics Levels Geography / topology Time Aggregation Size Color


Issues with parameter focusing

Space of parameters large Combination of parameters to choose Displays sensitive to particular parameter values

SOLUTION– Allow Direct manipulation of parameters


GRAPH DRAWING

Visualization Course OI(39)

History of Graph Drawing

Euler used a drawing to solve the Königsberger Brückenproblem (1736)

Symposia on Graph Drawing initiated 1992 Issues

– Planarity • No edges cross in 2D

– Aesthetic rules• Edges should have same length• Edges should be straight lines• Isomorphic substructures displayed equivalently


Tasks Related to Graph Drawing

Layering a graph Turning graph into directed acyclic graph Planarizing (achieve that no edges cross) Minimizing area Minimizing number of bends in edges

But Algorithms too complex for large graphs


Graph Drawing Aesthetics

Minimize edge crossings Draw links as straight as possible Maximize minimum angle Maximize symmetry Minimize longest link Minimize drawing area Centralize high-degree nodes Distribute nodes evenly Maximize convexity (of polygons) …

Source: [9] Davidson & Harel

Node Placement Methods

Node-link diagrams– Force-directed– Geographical maps– Circular layouts

• One or multiple concentric

– Clustering– Layouts based on node attributes (later)

Matrix-based representations

Force-directed Layout

Source: www.visualthesaurus.com

Also known as: Spring

Spreads nodes– Minimizes

chance of node occlusion

Example

A graph drawing through a number of iterations of a force directed algorithm.

Graph Layout: The Problem


Traditional Graph Drawing

Visualization Course OI

poly-line graphs

planar, straight-line drawing

orthogonal drawing

upward drawing of

DAGs48

Graph based techniques


2D Graph Examples


3D-Graph Drawing



Solutions for your logic and mechanical puzzles

"Dear Archimedes Lab, if you have 3 houses and each need to have water, gas and electricity connected, is it possible to do so without crossing any lines? Can you please post the solution? Thank you very much!" -- Gerald

Category: Topological graph theory.

Graph layout


Graphs are ubiquitous models.– Networks, protocols, schemas, web, software…

Effective visualization techniques match tasks, perception and algorithms.

hierarchicalforce-directed

orthogonal

symmetric

Hierarchical drawing: finite state machine (protocol)


Layout is made by a series of optimizations.

Geometric and topological objectives such as edge length and crossings are ‘optimized’

Gansner, North, Vo, after Sugiyama

Hierarchical layout Force-directed layout

Two images of the same network

Much of the difficulty with automatic layout problems rests in seeing the problem as uniform. Contrast two well known models: a hierarchical layout and a force-directed layout.

What makes a good visualization?


Much of the difficulty with automatic layout problems rests in seeing the problem as uniform. Contrast two well known models: a hierarchical layout and a force-directed layout.

Hierarchical layout Force-directed layout

Two images of the same network

What makes a good visualization?


Force-Directed Layout• The principle is to minimize the energy of the layout• The physical analogy is that every node in the graph is a charged

electric particles and every edge is an elastic spring• Nodes connected by edges will exert an attraction force• All nodes will exert a repelling force on each other, regardless of

whether they are connected or not• For each node, calculate the total force acting upon it• Move the position of the mode along the direction of the force• Do this process for every node• Repeat the above force-directed movement iteratively• Until it converges into a layout that has minimal forces for nodes,

thus the minimal energy of the layout

Graph Visualization


Call Graph using a Force-Directed Layout

Graph Visualization


Tree-based graph layout


Select a tree-structure out of the graph– Breadth-first-search tree– Minimum spanning tree– Other domain-specific structures

Use a tree layout algorithm Benefits

– Fast, supports interaction and refinement

Drawbacks– Limited range of layouts

61

Minimum spanning tree


Hierarchical graph layout


Use directed structure of graph to inform layout Order the graph into distinct levels

– this determines one dimension

Now optimize within levels– determines the second dimension– minimize edge crossings, etc

Great for directed acyclic graphs, but often misleading in the case of cycles

Hierarchical Graph Layout


Evolution of the UNIX operating system

Hierarchical layering based on descent

64

Hierarchical graph layout


Gnutella network

65

Radial Layout


Animated Exploration of Graphs with Radial Layout, Yee et al., 2001

Gnutella network

Graph Visualization Problems


AESTHETICS OF GRAPH


How to make a nice graph


Graph Drawing Methods: Concepts

Aesthetics: specify graphic properties we would want to apply as much as possible to achieve readability.– Crossings– Area– Total / Maximum / Uniform Edge Length– Total / Maximum / Uniform Bends– Angular resolution– Aspect Ratio– Symmetry


Crossings: minimization of the total number of crossings.– Ideally we would have planar graphs (not always

possible).

Graph Drawing Methods: Concepts Area: minimization of the area of the drawing.

– Important to save screen space– Relevant just when we cannot arbitrarily scale the

graph down


Total Edge Length: minimization of the sum of the lengths of the edges.

Maximum Edge Length: minimization of the maximum length of an edge.– Both relevant just when we cannot arbitrarily scale the

graph down.

Uniform Edge Length: minimization of the variance of the lengths of the edges.


Total Bends: minimization of the total number of bends along the edges.– Important for orthogonal drawings– Trivially satisfied by straight-line drawings

Maximum Bends: minimization of the maximum number of bends on an edge.

Uniform Bends: minimization of variance of the number of bends on an edge.


Angular resolution: Maximization of the smallest angle between two edges incident on the same vertex.


Aspect Ratio: minimization of the aspect ratio of the drawing

L2

L1

A.R. = L2/L1


Symmetry:display the symmetries of the graph in the drawing


Most aesthetics are associated with optimization problems – most of them computationally hard.

Approximation strategies and heuristics for real-time response.

Graph Visualization

Force-Directed Layout Splatting;Dense Representation



Thank you for your attentionPavel Slavík, 19.04.2023

Circular Layouts (1 circle)

Ex: Schemaball– Database schema– Tables connected via

foreign keys

Source: http://mkweb.bcgsc.ca/schemaball/?home

Schemaball, Martin Krzywinski

visualization - 10 pavel slavík. env 2006 3.2 the screen space problem all techniques, sooner or...

Documents