Upcoming SlideShare
×

# Mdst3559 2011-04-26-viz1

252 views
235 views

Published on

Published in: Education, Technology
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total views
252
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
1
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Mdst3559 2011-04-26-viz1

1. 1. Visualizing 1<br />MDST 3559: DataestheticsProf. Alvarado03/26/2011<br />
3. 3. Review<br />The data model<br />
4. 4.
5. 5. Views<br />shah_episide_and_captions_VIEW<br />zim_topic_in_para_VIEW<br />
6. 6. Overview<br />Review principles of visualization covered so far in the course<br />Review principles of hand-made visualizations<br />
7. 7. What is visualization?<br />
8. 8. All visualization involves transformation<br />Raw Data  Data Models  Queries  Arrays  Visual Arrangements<br />
9. 9. The “final” transformation<br />The visual product encodes a series of transformations from raw data to visual design<br />A key element of this design is the use of space<br />Space is complex—it involves the concepts of dimension, location, distance, and shape<br />Each visualization uses these elements differently <br />
10. 10. What is transformation?<br />Review Examples<br />
11. 11. Patterns of Transformation (i)<br />Image Grids (aka Image Graphs)<br />Purpose: Creates 2D qualitative space<br />Space is uniform, Cartesian<br />“Points” are actually not atomic, but contain content<br />Designed to show “hot spots” <br />Method:<br />Identify X and Y in which to plot objects of type A<br />Create query to generate A, X and Y columns<br />Convert query data into 3D array \$DATA[\$X][\$Y] = \$A<br />Convert array into HTML<br />
12. 12. http://studio1.shanti.virginia.edu/~rca2t/dataesthetics/03-29/v4.php<br />
13. 13. Patterns of Transformation (ii)<br />Network Graphs<br />Purpose: Creates a network of relationships<br />Space not uniform—distance and location of nodes require interpretation<br />Method:<br />Identify nodes and principle of relationship (e.g. container)<br />Create query to generate nodes and principle<br />Convert query into NODE and EDGE arrays<br />Convert arrays data into Cartesian Product for each principle<br />Convert array into PNG, SVG, etc.<br />
14. 14. http://studio1.shanti.virginia.edu/~rca2t/dataesthetics/04-26/graph-main.php<br />
15. 15. Patterns of Transformation (iii)<br />Adjacency Matrix <br />Purpose: Creates a 2D space<br />But X and Y are “self similar”<br />Method:<br />Identify X and Y<br />Create query to generate X and Y columns<br />Convert query data into 2D array<br />Convert array into HTML<br />
16. 16. http://studio1.shanti.virginia.edu/~rca2t/dataesthetics/04-21/ex-04-pviz-matrix.php<br />
17. 17. Patterns of Transformation (iv)<br />Arcs and Circles<br />Purpose: Creates a 2D dimensions, with 1 dimension metric, the other not<br />Only an X axis with connections in qualitative space<br />Method:<br />Same as network graphs<br />Visualize using Protovis library<br />
18. 18. http://studio1.shanti.virginia.edu/~rca2t/dataesthetics/04-21/ex-04-pviz-arc.php<br />
19. 19.
20. 20. Patterns of Transformation (v)<br />Hand-made<br />Purpose: Creates a free-form qualitative space<br />Method:<br />Draw!<br />
21. 21.
22. 22.
23. 23.
24. 24. What happens to space?<br />