1. Principles of Analytical
Design
Nicolas Garcia Belmonte - @philogb - Sept. 2011

2. I use Web Standards to create Data Visualizations.

3. I’m the author of two JavaScript data visualization
frameworks.
PhiloGL JavaScript InfoVis Toolkit

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

5. 1 - Show comparisons, contrasts, differences.

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

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

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

9. Lie Factor
1985: the line representing 27.5 m/g is 5.3 inches long
1978: the line representing 18.0 m/g is 0.6 inches long
Lie Factor: 783 / 53 = 14.8!
Source: The New York Times

10. Sometimes it’s useful to emphasize something.

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

12. Source: Semiology of
Graphics - Jacques Bertin

13. Charles Minard’s data-map describes the successive losses
in men of the French army during the French invasion of
Russia in 1812
Source: Edward Tufte - Beautiful Evidence

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

15. Channel Ranking vs. Data Type
Quantitative Ordinal Nominal
Position Position Position
Length Density Hue
Angle Saturation Texture
Slope Hue Connection
Area Texture Containment
Volume Connection Density
Density Containment Saturation
Saturation Length Shape
Hue Angle Length
Texture Slope Angle
Connection Area Slope
Containment Volume Area
Shape Shape Volume
Source: Tamara Munzner. Chapter 27, p 675-707, of Fundamentals of Graphics, Third Edition, by Peter Shirley et al. AK Peters, 2009

16. Maps for height, hair color and
cephalic index distribution
Source: Semiology of Graphics - Jacques Bertin

17. Map for height, hair color and
cephalic index distribution
Source: Semiology of Graphics - Jacques Bertin

18. Source: Reddit.com

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

20. Source:Vancouver Map

21. Source: Carmel Map

22. Source: Zurich Map

23. Source: The Hague Map

24. Source: Paris Bus Map

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

26. Source: Beautiful Evidence - Edward Tufte

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

28. Source: Wikipedia

29. Other Useful Principles
6 - Interactivity
7 - Personalization / Identification
8 - Aesthetic value

30. Other Useful Principles
Source: The New York Times

31. Thanks!
Nicolas Garcia Belmonte
@philogb http://philogb.github.com/