infovis para la web: teoria, herramientas y ejemplos

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

• Google

• 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/

Gracias!

@philogb

http://philogb.github.com/