Visualizing 1 MDST 3559: Dataesthetics Prof. Alvarado 03/26/2011
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?