5/16/18

Visualization

CS 299 – Introduction to Data Science

Overview
1. What Is Visualization?
2. History of Visualization
3. Relationship between Visualization and Other
Fields
4. The Visualization Process
5. The Scatterplot
6. The Role of the User

1
 5/16/18

1. What is Visualization?

data

https://en.oxforddictionaries.com/definition/visualization

2
 5/16/18

Visualization: From Data to Information

• Data alone are not enough to establish a
communicative process.
• To give meaning to data, they must first be
processed, organized, and presented in a
suitable format.
• This transformation and manipulation of the
data produces information that “is
accomplished by organizing it into a
meaningful form, presenting it in meaningful
and appropriate ways, and communicating the
context around it”

Visualization in Everyday Life

3
 5/16/18

Humans and Visualization

• Humans perceive visual attributes very well
• Visual attributes like color, size, proximity, and movement
are immediately taken in and processed by the
perceptual ability of vision
• Even before the complex cognitive processes of the
human mind come into play.

Different insights can be gained from different visual representations

4
 5/16/18

The same data

plotted with
different scales
(a) Equally (uniformly) large scale in both x and y (b) Large scale in y
is perceived
dramatically
differently:

(c) Large scale in y (d) Scale determined by range of x- and y-values.

2. History of Visualization

5
 5/16/18

2.1. Early Visualizations

The famous Hereford

map, the largest surviving
map of the Middle Ages
(1280s).

Wikimedia Commons

2.1. Early Visualizations

A section of John Snow’s

map of the deaths from
cholera in London in
1663.

Each bar within the

houses represents one
deceased individual.

Wikimedia Commons

6
 5/16/18

Overview map of
the deaths from
Cholera in London
in 1663.

Note the
concentration
around the Broad
Street Water Pump.
Note as well the
outliers.

Wikimedia Commons

Two early time series visualizations:

Wikimedia Commons Wikimedia Commons

Produced by Biruni circa 1030.

Shows the phases of the moon in Shows planetary motion
orbit.

7
 5/16/18

Wikimedia Commons

Minard’s map, showing Napoleon’s march on Moscow. The width of

the line conveys the size of the army at that location. Color indicates
the direction of movement. The temperature is plotted at different
points along the retreat at the bottom.

Early visualizations of William Playfair:

A plot of the national debt A display of the balance of trade

over time. between England and
Norway/Denmark (1786).

Wikimedia Commons

8
 5/16/18

Florence Nightingale’s
coxcomb chart showing
monthly deaths from
battle and other causes.

Blue represents the

deaths from disease
Red represents deaths
from wounds
Black represents all other
deaths.
http://understandinguncertainty.org/node/213

Leonardo Da Vinci’s
study of the motion
of the human arm
(1510).

Wikimedia Commons

9
 5/16/18

2.2. Visualization Today

The Beijing Underground map. A logical representation of the metro
highlighting qualitative relationships between the stops.

Two examples of 12-lead ECGs:

An 83-year-old adult with

A normal adult: heart problems:

http://www.ecglibrary.com/ecghome.html

10
 5/16/18

Yeast mechanism of action data with regression line.

Umass Lowell UVP Software (http://www.uvp.com/visionworks.html)

3. Relationship between Visualization

and Other Fields

11
 5/16/18

3.1. Visualization vs. Computer Graphics

• The most important aspect of all visualizations is their connection to

data. Computer graphics focuses primarily on graphical objects
(points, lines, areas, and volumes) and the organization of graphic
primitives; visualizations go one step further and are based on the
underlying data, and may include spatial positions, populations, or
physical measures.

• Visualization is the application of graphics to display data by

mapping data to graphical primitives and rendering the display.

3.2. Scientific Visualization (SciViz) vs.

Information Visualization (InfoViz)

• Initially, scientific visualization and information

visualization were differentiated, although some
no longer differentiate the two.
• Both provide representations of data. However
the data sets are most often different.
• ScientificViz – typically concerned with objects.
• InfoViz – typically concerned with abstract data.

12
 5/16/18

An example of a drug that targets Electron microscopic image of

HIV-I reverse transcriptase: filaments of DNA:

OpenDX (http://www.opendx.org/)
Alias/Wavefront Visualizer & OpenDX
(http://www.opendx.org/)

4. The Visualization Process & Human

Considerations

13
 5/16/18

4.1. The Visualization Pipeline

4.2. The Role of Perception

14
 5/16/18

Wikimedia Commons

The strength of the eye’s saccadic movement is hard to

overcome.

5. The Scatterplot – An example

15
 5/16/18

The Data

Vehicle Sedan Sports SU Wagon Miniva Picku AWD RWD Price

Name V n p
Acura 3.5 1 0 0 0 0 0 0 0 43755
RL 4dr
Acura 0 0 1 0 0 0 1 0 36945
MDX
Suzuki 0 0 1 0 0 0 0 0 23699
XL-7 EX

A simple partial table of car and truck data. Note that you can
think of this as a row-based table (cars and trucks) or a column-
based table (car attributes). Note: 1=yes; 0=no.

Toyota vehicle table. All variables are shown.

Notice that there are a few missing values.

16
 5/16/18

A scatterplot of
horsepower
versus city MPG
for Toyota
vehicles. The
vehicle class is
mapped to color.

6. The Role of the User

17
 5/16/18

Goals/Activities
• Presentation: The user is trying to convey some
concept or set of facts to an audience.
• Interactive Presentation: The user is providing a
presentation as above but one that is interactive
typically for an individual to explore.
• Exploration: The user possesses a data set and wants
to examine it to ascertain its contents and/or whether a
particular feature or set of features is present or
absent.
• Confirmation: The user has determined or
hypothesized that a given feature is present in the data
and wants to use the visualization to verify this fact or
hypothesis.

7. Creating Visualizations

18
 5/16/18

Example libraries/toolkits/APIs
• D3.js (JavaScript)
– https://d3js.org
• Shiny (R)
– https://shiny.rstudio.com
• Pandas plotting (Python)
– https://pandas.pydata.org/pandas-
docs/stable/visualization.html
• Google Charts (JavaScript)
– https://developers.google.com/chart/

19