infovis para la web: teoria, herramientas y ejemplos
DESCRIPTION
Charla en ITBA sobre visualizacion.TRANSCRIPT
![Page 1: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/1.jpg)
InfoVis para la Web Teoría, Herramientas y
Ejemplos
Nicolas Garcia Belmonte - Mayo 2012
![Page 2: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/2.jpg)
Uso estándares web para crear visualizaciones de datos.
@philogb
![Page 3: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/3.jpg)
Soy el autor de dos frameworks de visualización en JavaScript
PhiloGL JavaScript InfoVis Toolkit
![Page 4: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/4.jpg)
![Page 5: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/5.jpg)
![Page 6: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/6.jpg)
El Problema
![Page 7: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/7.jpg)
![Page 8: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/8.jpg)
@philogb - Stanford ACM Tech Talks
![Page 9: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/9.jpg)
Ojalá estuviera preparado para crear
visualizaciones!
![Page 10: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/10.jpg)
Teoría
![Page 11: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/11.jpg)
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
![Page 12: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/12.jpg)
1 - Show comparisons, contrasts, differences.
![Page 13: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/13.jpg)
Source: Randall Munroe - http://xkcd.com/
![Page 14: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/14.jpg)
Source: Randall Munroe - http://xkcd.com/
![Page 15: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/15.jpg)
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
![Page 16: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/16.jpg)
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
![Page 17: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/17.jpg)
Sometimes it’s useful to emphasize something.
![Page 18: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/18.jpg)
Source: Semiology of Graphics - Jacques Bertin
![Page 19: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/19.jpg)
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
![Page 20: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/20.jpg)
3 - Show multivariate data; that is, show more than 1 or 2 variables.
![Page 21: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/21.jpg)
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
![Page 22: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/22.jpg)
Maps for height, hair color and cephalic index distribution
Source: Semiology of Graphics - Jacques Bertin
![Page 23: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/23.jpg)
Map for height, hair color and cephalic index distribution
Source: Semiology of Graphics - Jacques Bertin
![Page 24: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/24.jpg)
Source: Reddit.com
![Page 25: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/25.jpg)
4 - Completely integrate words, numbers, images, diagrams.
![Page 26: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/26.jpg)
Source: Vancouver Map
![Page 27: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/27.jpg)
Source: Carmel Map
![Page 28: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/28.jpg)
Source: Zurich Map
![Page 29: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/29.jpg)
Source: The Hague Map
![Page 30: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/30.jpg)
Source: Paris Bus Map
![Page 31: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/31.jpg)
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.
![Page 32: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/32.jpg)
Source: Beautiful Evidence - Edward Tufte
![Page 33: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/33.jpg)
6 - Analytical presentations ultimately stand or fall depending on the quality, relevance and integrity of their
content.
![Page 34: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/34.jpg)
Source: Wikipedia
![Page 35: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/35.jpg)
Other Useful Principles
6 - Interactivity
7 - Personalization / Identification
8 - Aesthetic value
![Page 36: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/36.jpg)
Herramientas
![Page 37: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/37.jpg)
JavaScript InfoVis Toolkit
http://thejit.org/
![Page 38: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/38.jpg)
![Page 39: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/39.jpg)
JavaScript InfoVis Toolkit
http://thejit.org/
• The White House
• Mozilla
• The Guardian
• Al-Jazeera
A Hands-On Toolkit
![Page 40: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/40.jpg)
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/
![Page 41: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/41.jpg)
Ejemplos
http://senchalabs.org/philogl/
![Page 42: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/42.jpg)
//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 */ } });
![Page 43: InfoVis para la Web: Teoria, Herramientas y Ejemplos](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bc2f5a4a7959416d8b45b5/html5/thumbnails/43.jpg)
Más Ejemplos
http://senchalabs.org/philogl/