Mdst3559 2011-04-26-viz1

Visualizing 1

MDST 3559: DataestheticsProf. Alvarado03/26/2011

Business

• Journaling?• Access to the database?• Last two weeks of class

Review

• The data model

Views

• shah_episide_and_captions_VIEW• zim_topic_in_para_VIEW

Overview

• Review principles of visualization covered so far in the course

• Review principles of hand-made visualizations

What is visualization?

All visualization involves transformation

Raw Data Data Models Queries Arrays Visual Arrangements

The “final” transformation

• The visual product encodes a series of transformations from raw data to visual design

• A key element of this design is the use of space

• Space is complex—it involves the concepts of dimension, location, distance, and shape

• Each visualization uses these elements differently

What is transformation?

Review Examples

Patterns of Transformation (i)

• Image Grids (aka Image Graphs)– Purpose: Creates 2D qualitative space• Space is uniform, Cartesian• “Points” are actually not atomic, but contain content• Designed to show “hot spots”

– Method:• Identify X and Y in which to plot objects of type A• Create query to generate A, X and Y columns• Convert query data into 3D array $DATA[$X][$Y] = $A• Convert array into HTML

http:

//st

udio

1.sh

anti.

virg

inia

.edu

/~rc

a2t/

data

esth

etics

/03-

29/v

4.ph

p

Patterns of Transformation (ii)

• Network Graphs– Purpose: Creates a network of relationships

• Space not uniform—distance and location of nodes require interpretation

– Method:• Identify nodes and principle of relationship (e.g. container)• Create query to generate nodes and principle• Convert query into NODE and EDGE arrays• Convert arrays data into Cartesian Product for each

principle• Convert array into PNG, SVG, etc.

http://studio1.shanti.virginia.edu/~rca2t/dataesthetics/04-26/graph-main.php

Patterns of Transformation (iii)

• Adjacency Matrix – Purpose: Creates a 2D space• But X and Y are “self similar”

– Method:• Identify X and Y• Create query to generate X and Y columns• Convert query data into 2D array• Convert array into HTML

http:

//st

udio

1.sh

anti.

virg

inia

.edu

/~rc

a2t/

data

esth

etics

/04-

21/e

x-04

-pvi

z-m

atrix

.php

Patterns of Transformation (iv)

• Arcs and Circles– Purpose: Creates a 2D dimensions, with 1

dimension metric, the other not• Only an X axis with connections in qualitative space

– Method:• Same as network graphs• Visualize using Protovis library

http://studio1.shanti.virginia.edu/~rca2t/dataesthetics/04-21/ex-04-pviz-arc.php

Patterns of Transformation (v)

• Hand-made– Purpose: Creates a free-form qualitative space– Method:• Draw!

What happens to space?