Charla en ITBA sobre visualizacion.

1. InfoVis para la Web
Teoría, Herramientas y
Ejemplos
Nicolas Garcia Belmonte - Mayo 2012

2. Uso estándares web para crear visualizaciones de datos.
@philogb

3. Soy el autor de dos frameworks de visualización en
JavaScript
PhiloGL JavaScript InfoVis Toolkit

6. El Problema

8. @philogb - Stanford ACM Tech Talks

9. Ojalá estuviera
preparado para crear
visualizaciones!

10. Teoría

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

12. 1 - Show comparisons, contrasts, differences.

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

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

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

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

17. Sometimes it’s useful to emphasize something.

18. Source: Semiology of
Graphics - Jacques Bertin

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

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

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

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

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

24. Source: Reddit.com

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

26. Source:Vancouver Map

27. Source: Carmel Map

28. Source: Zurich Map

29. Source: The Hague Map

30. Source: Paris Bus Map

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

32. Source: Beautiful Evidence - Edward Tufte

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

34. Source: Wikipedia

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

36. Herramientas

37. JavaScript InfoVis Toolkit
http://thejit.org/

39. JavaScript InfoVis Toolkit
A Hands-On Toolkit
• The White House
• Mozilla
• Google
• The Guardian
• Al-Jazeera
http://thejit.org/

40. PhiloGL
• Framework de visualización en WebGL
• Maneja muchos datos ( > 100K elems )
• Usa JavaScript
http://senchalabs.org/philogl/
Model courtesy of Nicolas Kassis - McGill Univ.

41. Ejemplos
http://senchalabs.org/philogl/

42. //Create application
PhiloGL('canvasId', {
program: {
from: 'uris',
vs: 'shader.vs.glsl',
fs: 'shader.fs.glsl'
},
camera: {
position: {
x: 0, y: 0, z: -50
}
},
textures: {
src: ['arroway.jpg', 'earth.jpg']
},
events: {
onDragMove: function(e) {
//do things...
},
onMouseWheel: function(e) {
//do things...
}
},
onError: function() {
alert("There was an error creating the app.");
},
onLoad: function(app) {
/* Do things here */
}
});

43. Más Ejemplos
http://senchalabs.org/philogl/

44. Gracias!
@philogb
http://philogb.github.com/