This document discusses database visualization and transformation. It provides examples of different types of visualizations including image grids, network graphs, adjacency matrices, arcs and circles. It explains that raw data undergoes a series of transformations to data models, queries and arrays before being arranged visually. Different visualization techniques use space, location and other elements differently to reveal patterns in the data.

1. From Database to Visualization
Prof Alvarado
MDST 3705
5 March 2013

2. Business
• Quiz 2 to be posted this evening
– Covers everything between the last quiz and
last week
– Database theory and practice

3. Review
• Last week, we explored the idea of the
database as a ―symbolic form‖ and ―genre‖
– The Database is a mode of representation
comparable to such things a linear perspective in
painting and the novel in writing
• The Database has certain representational
qualities
– Everything is a list (like an array)
– Order does not matter
– No inherent beginning or end
– Endlessly reconfigurable (SELECT, JOIN, etc.)

4. Review
• The Database stands in contrast to
narrative
– Traditional narrative is sequential and fixed
– Endings matter; novels have an arc.
• The Database reverses the relationship
between paradigm and syntagm
– Traditional works are final products of a
process that is hidden and forgotten
– The products of a database are ephemeral
and contingent – the database itself is the
thing

5. Review
• Databases have a logic that is used in the
arts
– Stories in which the order of events or
perspectives are mixed up. Manovich calls the
‗database logic‘
– An example is the film, Man with a Movie
Camera
• Databases can be more effective than
books in organizing works of art and
literature
– E.g. The Whitman Project

6. Vertov's film shows the Just as we saw that Linear
relationship between Perspective and the Novel go
Database and Montage together

7. Data(bases) can be visualized
More than that, they lend themselves to
visualization
Let‘s look at a couple of examples …

8. A radial network graph from data scraped from Pandora, beginning with the Beatles

9. A force directed network graph of data scraped from Pandora, beginning with Elvis
Costello

10. These network visualizations show the
database as a genre – a way of
representing information
Compare them to a catalog of musical
artists in a book (itself a kind of database)

11. A database
record
depicted as a
kind of text

12. The examples also show
the database as a way to
understand genre

13. What is visualization?

14. ―a mapping between discrete data and a
visual representation‖ (Manovich)
or
a mapping of information in logical form
to visual form

15. Manovich defines two types:
Information Visualization
Media Visualization

16. Statistics and information
visualization were invented in
the 18th century. This was
linked to the rise of nation
states and bureaucracy
William
Playfair

17. The result of
nations becoming
aware of data ...

18. According to Manovich, the salient
features of information visualization are
(1) The reduction of data items to points,
lines, etc.
and
(2) the use of space (size, shape, etc.) as
the primary vehicle of representation
Color is used, but as an embellishment

19. Here are some examples …

20. William Playfair (1786) The Commercial and Political
Atlas: Representing, by Means of Stained Copper-
Plate Charts, the Progress of the Commerce,
Revenues, Expenditure and Debts of England during
the Whole of the Eighteenth Century.
http://www.visionlearning.com/library/large_images/image_4108.png

21. http://dougmccune.com/blog/wp-

22. http://www.economist.com/images/20071222/5107CR1B.jpg

23. Joseph Priestley's life-time graph of the lifespans of
famous people. One of the first graphical time lines.
Joseph Priestly, A Chart of Biography, 1765.
http://www.math.yorku.ca/SCS/Gallery/images/priestley.gif

24. Minard’s map
http://cartographia.files.wordpress.com/2008/05/minard_napoleon.png

25. http://cartographia.files.wordpress.com/2008/05/minard-full.jpg

26. http://commons.wikimedia.org/wiki/File:Minard-carte-viande-1858.png

27. The difference is that
information visualizations
reveal patterns in the data,
whereas info graphics use
patterns to present a point
or to present an idea

28. Media Visualizations are not essentially
reductive, and they use color as much as
space

31. Time Magazine covers
between 1923 and 2009
Data points are the objects
themselves
Color emerges as a key
dimension
Sequencing -- "cultural time
series"

32. What can you learn from this
visualization?

38. A million manga pages

41. Rothko and Mondrian

42. Not all visualizations are
information visualizations in
Manovich's sense ...
The following are ―info
graphics‖

44. The Odyssey

45. The History of Science Fiction

46. Rebecca Black's "Friday"

47. What’s the big difference?

48. Information and media visualizations are
generated algorithmically
Info graphics tend to be hand made
creations (although they may emulate
algorithms)
The former exemplify Manovich‘s principle
that databases generate works – in this
case, visualizations

49. Are information and media visualizations
more truthful than information graphics?

50. graphesis

51. graphesis
Information embodied in
material form

52. graphesis
Opposite of mathesis –
Science, math as
universal language

53. Think of the relationship between geometry
and algebra
Database: Visualization :: Algebra : Geometry
Which is more real? Which depends on the
other?

54. Can we imagine what a point is without
visualizing it?
Is information separable from matter?

55. graphesis
the basis of mathesis

56. Media are always
embedded in culture.
Science was made
possible by exact copy
printing, a visual language
(Ivins 1953)
http://21st.century.phil-inst.hu/2002_konf/Nyiri/web_ivins.JPG

57. These images are both
beautiful and effective
As digital scholars, our job
is to learn how to read,
review, and produce them

58. The theory of graphesis
teaches us that images
have an epistemology, or
―cognitive style‖

59. Paradoxes
• Computers are based on mathesis, or
logico-mathematical thinking
• And visualization is based on computing
• Ergo, mathesis precedes graphesis
• But, mathesis rests on graphesis
– The iconography of mathematical symbols
– The products of mathesis must always be
visualized with forms that have a rhetoric

60. http://oneparticularwave.files.wordpress.com/2006/11/escher.gif

61. All visualization involves
transformation
Raw Data  Data Models 
Queries  Arrays  Visual
Arrangements

62. 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

63. What is transformation?
Review Examples

64. 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

65. http://studio1.shanti.virginia.edu/~rca2t/dataesthetics/03-29/v4.ph

66. 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.

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

68. 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

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

70. 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

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

73. Patterns of Transformation (v)
• Hand-made
– Purpose: Creates a free-form qualitative
space
– Method:
• Draw!