Post on 19-Jan-2015
description
InfoVis para la Web Teoría, Herramientas y
Ejemplos
Nicolas Garcia Belmonte - Mayo 2012
Uso estándares web para crear visualizaciones de datos.
@philogb
Soy el autor de dos frameworks de visualización en JavaScript
PhiloGL JavaScript InfoVis Toolkit
El Problema
@philogb - Stanford ACM Tech Talks
Ojalá estuviera preparado para crear
visualizaciones!
Teoría
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.
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
Herramientas
JavaScript InfoVis Toolkit
http://thejit.org/
JavaScript InfoVis Toolkit
http://thejit.org/
• The White House
• Mozilla
• The Guardian
• Al-Jazeera
A Hands-On Toolkit
PhiloGL
• Framework de visualización en WebGL
• Maneja muchos datos ( > 100K elems )
• Usa JavaScript
Model courtesy of Nicolas Kassis - McGill Univ.
http://senchalabs.org/philogl/
Ejemplos
http://senchalabs.org/philogl/
//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 */ } });
Más Ejemplos
http://senchalabs.org/philogl/