22 Types of Visualization and Design Principles of Visualization

T. Raghuveera

Visualization is the process of representing abstract business or scientific data as images that can aid in understanding the meaning of the data.In general Visualization is a technique that involving focusing on positive mental images in order to achieve a particular goal. We start with Visualization Types and Design Principles of Visualization in this module. The learning objectives for this module are to explore the following:

Learning Objectives:

• To introduce the types of Visualization.

• To learn types of visualization in various aspects.

• To learn about the design principles of Visualization.

• To know about the examples of Visualization design techniques.

1.  Purpose of Visualization

With the help of visualization,

• It is possible to do certain kind of visualization Self study or analysis and also try to gain understanding of certain principles and interactive exploration.
• Make some understanding between Peers and Probing inside the problem domain and Analyzing data and Communicating with peers using visualization tool.
• It also helps as a tool for Presenting something to a General Public and also for communicating with general audience using this presentation tools.

1.1 Visualization Principles

The principles of visualization are

• Expressiveness which means to encode all the facts in the result set and to encode only the facts in the result set.
• Effectiveness: which depends on the capability of the perceiver and to encode the more important information more effectively.

1.2 The Visualization Pipeline

The visualization pipeline consists of the following attributes namely

• Data (simulated or observed)
• Filter
• Map to geometry
• Viewing Attributes
• Object Attributes
• Render
• Display
• Record
• Loop to appropriate step…

1.3 Advantages of Visualization

Some of the advantages of visualization are

• Amplifies cognition.
• Increases resources
• Reduces search
• Enhanced recognition of patterns
• Perceptual inference
• Perceptual monitoring
• Manipulatable medium

1.1.1 Visualization – Twin Subjects

Visualization is mainly classified into two types.

Scientific Visualization: –   Visualization of physical data.

Information Visualization: –  Visualization of abstract data.

The below table 1.1 shows the difference between Scientific Visualization and Information Visualization

Table 1.1 Difference between Scientific Visualization and Information Visualization

1.1.2 Information Types

The data to be visualized can be classified based on the information it depicts as follows:

• Multi-dimensional: databases
• 1D:  timelines
• 2D:  maps
• 3D:  volumes
• Hierarchies/Trees: directories
• Networks/Graphs:  web, communications
• Document collections: digital libraries

1.1.2.1 1-D Data

• Linear data: textual document, source code, etc.
• User problems: count, find, replace, etc.
• Encoding: fonts, color, size, layout, scrolling, selection capabilities, etc
• Product example: text editor, browser, etc.

1.1.2.2 2-D Data

• Planar or map data: geographical maps, floor plans, newspaper layouts, etc
• User problems: find adjacent items, search containment, find paths, filtering, details-on-demand, etc.
• Encoding: size, color, layout, arrangement, multiple layers, etc
• Product example: CAD

1.1.2.3 3-D Data

• Real-world objects: building, human body
• User problems: adjacency in 3-D, inside/outside relationship, position, orientation
• Encoding: overviews, landmarks, transparency, color, perspective, stereo display
• Product example: CAD

1.1.2.4 Temporal Data

• Time series data: medical records, project management, historical presentation
• User problems: finding all events before, after or during some time period or moment.
• Encoding: time lines

1.1.2.5 Multi-dimensional Data

• Relational and statistical databases tuples.
• User problem: finding patterns, clusters, correlations, gaps, outliers.
• Challenges:

Simultaneously display many dimensions of large subsets of data. Create displays that best encode the data pattern for a particular task. Rapidly select a subset of tuples or dimensions.

1.1.2.6 Tree Type Data

• Exponential data: hierarchies, tree structures.

User problems: find the structural properties, Height of the tree, Number of children and find nodes with same attributes

• Encoding: Node-link diagrams: allowing the encoding of linkage between entities.

Treemap: child rectangles inside parent rectangles

• Product example: windows explorer, internet traffic

1.1.2.7 Network Data

• Graph data: multiple paths, cycles, lattices
• User problems: Shortest path, Topology problems
• Encoding: Node-link diagram, Matrix

1.1.3 Basic Visualization Tasks

The basic visualization tasks are classified as follows:

Overview of a collection of data.

Zoom in/on objects of interest.

Filter out uninterested items.

Details-on-demand: view details.

Relate: View relationship.

History: Undo, Redo, Refinement.

Extract a subset of the data.

1.1.3.1 User Tasks

1. Easy stuff: It can be performed over the excel data sheet.

• Min, max, average, % of a data.

• These only involve data item or value

2. Hard stuff: It can be performed over visualization. It is mainly used to find out following

• Patterns, trends, distributions, changes over time

• Graphs of outliers, exceptions from the visualization

• relationships, correlations, multi-way,

• Combined min/max, tradeoffs,

• clusters, groups, comparisons, context,

• anomalies, data errors,

• Paths, etc.

1.4 Classification of Information Visualization Techniques

Visualization techniques can be classified as follows based on the type of information

• Visualization of Information Structure like Trees, Networks etc.
• Visualization of Multivariate Data like 1D, 2D, 3D, n-D, Temporal etc.
• Visualization of Workspace like Windows, web pages, documents, etc
• Based on how we interact with the data

1. Overview: fisheye
2. Zooming: e.g. Table Lens
3. Interactive filtering: e.g. Magic Lens
4. Brushing and linking: e.g. XGobi
5. Details-on-demand: e.g. Spotfire

1.5 Information Visualization Design Issues

Information visualization design issues are discussed below:

• Selection
• What data should we choose to visualize?
• Representation
• How should data be represented? Colors? Locations? …
• Presentation
• Too much data, too little display space
• Scale and Dimensionality
• What if you have 93 variables to visualize?
• Interaction and Exploration
• How user interacts with the data?

1.7 Information Visualization Applications

• Complex Documents like Biography, manuscript, data structure.
• Histories  like  Patient histories, student records, etc
• Classifications like Table of contents, organization charts, etc
• Networks like Telecom connections and usages, highway, etc

1.7.1 Information Visualization Example

• Stephen Eick’s Seesoft Information Visualization

Stephen Eick’s Seesoft is a tool for finding the source code. In the below fig 1.1, red rows represents most recently changed, and blue are those least recently changed. Seesoft displays data derived from a variety of sources, such as version control systems that track the age, programmer, and purpose of the code

• Hyperbolic Trees

In general, Hyperbolic Tree utilizes different layout algorithms to map the hierarchical relationship into a tree. In the below fig 1.2, the relationship between the websites can be represented using 2D and 3D hyperbolic trees.

• Themescape (Cartia)

ThemeScape automatically reads large numbers of documents, recognizes the informational content, and organizes the collection by topic onto a visual map. ThemeScape helps us to rise individual documents to see the big picture. Here below figure 1.3 explains entire documents list onto a visual map.

• Dimensions of Exploratory Data Visualization

Here the fig 1.4 explains about different dimensions of Exploratory Data Visualization. Y-axis represents different data visualization techniques such as geometric, Icon based, pixel oriented, hierarchical, graph based. X-axis represents different interaction techniques such as mapping, projection, filtering, link and brush and zooming.

• Location Probes: It uses location to view additional data. eg. Film finder.
• View point Controls: It contains the combination of Overview and detail eg.Information mural.
• Distortion: It contains the combination of Focus and Context. eg.Perspective Wall.

1.7.1 Data Types

Based on the data, visualization can be classified into three types.

•  Univariate

•  Bivariate

•  Trivariate

Univariate

Here below fig 1.5 shows an example of univarite data in terms of dot plot, bar

chart and histogram.

Figure 1.5 univarite data types

Bivariate

Here below fig 1.6 shows an example of bivarite data in terms of Scatterplot.

Figure 1.6 Bivarite data type

Trivariate

Here the below fig 1.7 shows an example of trivariate data type. It can be either a 3D scatterplot or 2D scatterplot which consists of attribute size or color etc.

1.7.2 Information Visualization Using 3D Interactive Animation Visual Abstractions

The reduction of an image to a set of lines, colors, symbols or patterns that results in a stylized representation of the object is visual abstraction. It means some of the information can be visualized on the screen and will be abstracted from the end users. It can be applied in various techniques as follows.

•  Hierarchical Structure: e.g. Cone Tree

•  Linear Structure: e.g. Perspective Wall

•  Continuous Data: e.g. Data Sculpture

•  Spatial Data: e.g. Office Floor plan

Cone Tree (Compaq Research)

Cone Tree, which is used for visualizing hierarchical information structures. The hierarchy is presented in 3D to maximize effective use of available screen space and enable visualization of the whole structure. Data represented in this form provides faster navigation and allows more information to be seen at one time. Here the below fig 1.8 shows an example of cone tree. Each tree node is the apex of a cone. The children of each node are drawn around the base of its associated cone.

The above fig 1.9 shows an example of perspective wall. By smoothly moving from side to side, the Perspective Wall gives the user a feeling of “object constancy.” Information is provided in a continuous flow from beginning to end.

Spatial data

Here the below fig 1.10 shows an example of spatial data such as Web Book and WebForager like Card, Robertson, York. 1996.

Qualitative vs. Quantitative

Here the below fig 1.11 shows an example of qualitative and quantitative in terms of contour and line diagrams.

   Static vs. Time-Varying Data

Static: It represents an particular instance of time Particular Point of View, etc.

Time-Varying Animation: It can be evolved along the time line and it may be a Dynamic Data or Point of View. The below fig 1.12 shows an example of static and time varying data.

1.8 Scientific Visualization

Scientific visualization is a new and rapid growth in computer technology, particular in graphics workstation hardware and computer graphics software. Visualization tools hold great promise for scientific research and education. When computer graphics is applied to scientific data for purposes of gaining insight, testing hypothesis, and general elucidation

1.8.1Damage Structure – Animation

The below fig 1.13 shows an example of damage structure animation. Here the damages can be shown using visualization.

1.8.2 Contour Surface & Volume Visualization

Volume visualization is a field of computer graphics with multiple applications in the representation and analysis of 3D scalar data. contour plot to explore the potential relationship between three variables. Contour plots display the 3-dimensional relationship in two dimensions. A contour plot is like a topographical map in which x-, y-, and z-values are plotted instead of longitude, latitude, and elevation. The below fig 1.14 shows an example of Contour Surface & Volume Visualization

1.8.2 Composite Representation

Here the below fig 1.15 shows the composite representation of contour surfaces.

1.9 Stereo Visualization

• Red-Blue Glasses contains red and blue color glasses mainly for viewing more special effects for the end users.
• Shutter Glasses have a frequency of 60 Hz and it can be synchronized with projected images·
• Polarized Glasses can be either a Linear (Horizontal/Vertical) or a Circular (CW/CCW) or a synchronized with projected images

1.9.1    Red-Blue Stereo Visualization

It chromatically encodes the image for each eye. The possible color codes are red/blue, red/cyan, red/green, blue/yellow, green/magenta. The below fig 1.16 shows an example of Red-Blue Stereo Visualization

 2. Design Aspects

2.1 The Aspects of Design

• Problem solving is the understanding of what is needed to solve a problem, which includes design, making choices and revisions.
• Visual Communication is the art of seeing by using pictures and words to convey information about different ideas and concepts.
• Function and information refer to the purpose and value of design as well as the message conveyed with respect to a selected audience

2.2 The Principles of Design

Balance is the optical illusion of equal spacing of objects.

• Formal balance is symmetrical. When elements on a page can be centered and/or evenly divided both horizontally and vertically it has symmetry. Symmetrical balance is generally for more formal, orderly layouts. These layouts often convey a sense of tranquility, familiarity, elegance or serious thought.
• Informal balance is asymmetrical. It involves placement of elements in a manner that allows elements of varying visual weight to balance one another around an imaginary point. For example, it is possible to balance a heavy weight with a cluster of lighter weights on equal sides of the imaginary line.
• Rhythm is a reoccurring movement or pattern, which can produce a feeling of motion in the design. Size, shape, color, spacing, angles and texture of the materials are all factors in placing rhythm in a design and can help lead the eye in some direction. Different types of rhythm will produce different effects in the design.
• Repetition: repeating similar elements in a consistent manner.
• Variation: change in form, size or location.
• Proportion is the relative size of one object in comparison to another. The human body is a considered an ideal proportion based on the size relationships between the body and the head. A caricature is funny because the head is out of proportion.

2.3 The Methods of Design

2.3.1 Emphasis is the method used to draw attention to a part of the design by making it the focal point or the main idea. The below fig 2.1 shows an example of an emphasis. There are common techniques that are used to add emphasis in a design:

•  Use contrasting elements, (big, small, thick, thin, negative, positive).

•  Use color for the most important element.

•  Reverse an element out of the background.

2.3.2 Contrast achieves emphasis by setting the point of emphasis apart from the rest of its background. The use of a neutral background isolates the point of emphasis. Contrast of color, texture, or shape will call atten

2.3.3 Unity is the completeness and harmony of a design. Unity is achieved when all the elements belong together. Several methods of organization are used to produce unity in the design:

• Grouping
• Using a grid (subdivision of space)
• Repetition – means repeating certain elements throughout the entire design. Using repetition can pull the design together (using a theme of squares then using different sizes and shapes of squares and rectangles). Example: using a repeated background on a PowerPoint presentation.
• 2.3.4 Line has length, position and direction and is either visible or invisible. A line (curve) is basically any distance between two points. The below fig 2.2 shows an example of lines. Lines can take on a variety of shapes and functions:

•   Connectors and separators

•   Outlines

•   Graphs and grids

Figure 2.2 Examples of lines

• 2.3.5 Shape is any form that occupies and defines negative and positive space. Shape is anything that has width, shape or depth. The below fig 2.3 shows an example of shapes. There are three types of shapes:

• Geometric (triangles, squares, circles)

• Natural (animals, plants, human)

• Abstract (simplified versions of natural shapes)

2.3.6 Color is the hue of pigment or light and is produced by the subtraction or addition of primary and secondary colors produced from light. Color is the primary tool for symbolism in communication. The below fig 2.4 shows an example of various colors. There are different uses of color:

• Attract the eye

• Produce visual stimuli

• Organization.

• Provoke emotional response

• The visible spectrum is only one small part of the electromagnetic spectrum.

• Our eyes have cells, contained on the retina, that chemically respond to different wavelengths of visible light, namely red, green, and blue.

• 2.3.7 Texture is the look or feel or any object or surface. The appearance is either visual (illusionary) or tactile (physical to touch). Patterns are good examples of visual texture.

• 2.3.8 Space is the negative or positive area that an object or objects occupy in an area. The below fig 2.5 shows an example of space. Using simple principles can control the relative position of every element:

• White space

• Overlapping elements Value

•2.3.9 Size is how big or small objects are in relation to the space they occupy. The primary roles size plays in design:

• Function (the age of the audience – older people would need type set larger to aid help in reading)

• Attractiveness (add interest by cropping or scaling the elements)

• Organization (make the important element the largest and the least important the smallest). The below fig 2.6 shows an example of various sizes.

2.4 White Space Tips

Don’t Trap White Space: Don’t trap white space between two design elements. This interrupts the flow of the design. Increase font size graphic size, or reposition elements to avoid

Keep Text Cells Small: Don’t have text stretch across the entire length of the design.

Avoid Rivers: Rivers appear if type is justified. A river is word spaces that appear near each other on subsequent lines of text. Edit the text instead of changing the word spacing. Rivers may also be a symptom that line length is too long or short.

2.4.1 White Space

GOOD: The Tennis Group business card which shown in the below in fig 2.7 makes good use of white space.

BAD: Card is too busy, has trapped white space between the information on the left and the logo. Your eye doesn’t really know where to look first.

2.5 Summary

To summarize, we have examined the following in this module:

• Types of Visualizations-Scientific and Information Visualization
• Information Visualization Types-1D, 2D, 3D, Trees, Network
• Information Visualization examples- Film Finder, Location Probe,

Perspective wall, Themescape

• Design Principles-Unity, Shape, Emphasis, proportion, Texture, Colour, Balance

References

1. C. Upson , T. Faulhaber Jr., D. Kamins , D. Laidlaw , D. Schlegel , J. Vroom , R. Gurwitz and A. van Dam , “The Application Visualization System: A computational environment for scientific visualization” , IEEE ComputerGraphics and Applications , vol. 9 , no. 4 , pp.30 -42 , 1989
2. S. Kochhar , M. Friedell and M. LaPolla , “Cooperative, computer-aided design of scientific visualizations” , Proceedings IEEE Visualization \’91 , pp.306 -313 , 1991
3. E-Study Guide for: White Space is Not Your Enemy: A Beginner’s Guide to communicating visually through graphic, web, multimedia Design 1St edition.
4. G.G. Robertson, J.D Mickinlay and S.K.Card “Cone Trees: Animated 3D Visualizations of Hierarchical Information” pp.415-494, 1991.