principles of analytical design - visually meetup - sept. 2011

Principles of Analytical Design

Nicolas Garcia Belmonte - @philogb - Sept. 2011

I use Web Standards to create Data Visualizations.

I’m the author of two JavaScript data visualization frameworks.

PhiloGL JavaScript InfoVis Toolkit

Fundamental Principles of Analytical Design (Tufte)

1 - Comparisons

2 - Causality, mechanism, structure, explanation

3 - Multivariate analysis

4 - Integration of evidence

5 - Documentation

6 - Content counts most of all

Source: Edward Tufte - Beautiful Evidence

1 - Show comparisons, contrasts, differences.

Source: Randall Munroe - http://xkcd.com/

Source: Randall Munroe - http://xkcd.com/

Lie Factor

“The representation of numbers, as physically measured on the surface of the graphic itself, should be directly

proportional to the quantities represented.”

Source: Tufte 1991

Lie Factor

1985: the line representing 27.5 m/g is 5.3 inches long1978: the line representing 18.0 m/g is 0.6 inches long

Lie Factor: 783 / 53 = 14.8!Source: The New York Times

Sometimes it’s useful to emphasize something.

2 - Show causality, mechanism, explanation, systematic structure.

Source: Semiology of Graphics - Jacques Bertin

Charles Minard’s data-map describes the successive losses in men of the French army during the French invasion of

Russia in 1812Source: Edward Tufte - Beautiful Evidence

3 - Show multivariate data; that is, show more than 1 or 2 variables.

Channel Ranking vs. Data Type

PositionLengthAngleSlopeArea

VolumeDensity

SaturationHue

TextureConnectionContainment

Shape

PositionDensity

SaturationHue

TextureConnectionContainment

LengthAngleSlopeArea

VolumeShape

PositionHue

TextureConnectionContainment

DensitySaturation

ShapeLengthAngleSlopeArea

Volume

Quantitative Ordinal Nominal

Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009

Maps for height, hair color and cephalic index distribution

Source: Semiology of Graphics - Jacques Bertin

Map for height, hair color and cephalic index distribution

Source: Semiology of Graphics - Jacques Bertin

Source: Reddit.com

4 - Completely integrate words, numbers, images, diagrams.

Source: Vancouver Map

Source: Carmel Map

Source: Zurich Map

Source: The Hague Map

Source: Paris Bus Map

5 - Thoroughly describe the evidence. Provide a detailed title, indicate the authors and sponsors, document the data

sources, show complete measurement scales, point out relevant issues.

Source: Beautiful Evidence - Edward Tufte

6 - Analytical presentations ultimately stand or fall depending on the quality, relevance and integrity of their

content.

Source: Wikipedia

Other Useful Principles

6 - Interactivity

7 - Personalization / Identification

8 - Aesthetic value

Other Useful Principles

Source: The New York Times

Thanks!

Nicolas Garcia Belmonte

http://philogb.github.com/@philogb