JavaScript para Gráficos y Visualización

de Datos

Nicolas Garcia Belmonte - @philogb

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

Visualización en la Web con JavaScript

Gather

Transform

Serve

Load Data

Build Models

Render

Interact

DB

Python

JSON / Binary

XHR2

Workers / TypedArrays

WebGL / 2D Canvas

DOM Events / HTML Forms

Extraer

Transformar

Servir

Cargar Datos

Crear Modelos

Renderear

Interactuar

Datos / Servidor / Cliente

Viz / Cliente

Primer Ejemplo

Data SourceVideo / Camera

InteractionForms

RenderingWebGL

Recolección de Datos

<video id="movie" autoplay controls class="shadows" width="480">  <source src="movie/shrek.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />  <source src="movie/shrek.ogv" type='video/ogg; codecs="theora, vorbis"' /></video>

HTML5 Video & Media Source

var video = document.getElementById('movie');video.play();video.pause();video.volume += 0.1;

navigator.getUserMedia('video', function(localMediaStream) {    video.src = window.URL.createObjectURL(localMediaStream);}, function() {    //error...});

Obtener pixel data usando 2D Canvas

<canvas id="pastie" width="50" height="50" style="display:none;"></canvas>

var canvas = document.getElementById('pastie'),    ctx = canvas.getContext('2d'),    rgbaArray;

ctx.drawImage( movie, 0, 0, 50, 50);

rgbaArray =  ctx.getImageData(0, 0, 50, 50).data;

Transformación de Datos

Crear Modelos 3DWeb Workers

var worker = new Worker('task.js');

worker.addEventListener('message', function(e) {    var models = e.data;    //do something with the models once they're built...}, false);

worker.postMessage();

//in task.jsself.addEventListener('message', function(e) {    var models;    //build models...    self.postMessage(models);});

Renderear la EscenaCanvas / WebGL / PhiloGL

  function loop() {    //send data to GPU    program.setUniform('size', sizeValue);    program.setBuffer('histogram', {      value: new Float32Array(createColorArray(movie)),      size: 1    });    //rotate histogram a little bit    theta += 0.007;    histogramModel.rotation.set(-Math.PI / 4, theta, 0.3);    histogramModel.update();    //clear the screen    gl.clearColor(color, color, color, 1);    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);    //render the scene    scene.render();    //request next frame for loop    Fx.requestAnimationFrame(loop);  }

Segundo Ejemplo

InteractionForms

InteractionForms

Rendering / InteractionWebGL

Datos

• 1200 estaciones de meteorología

• 72 horas de datos

• 5 variables - latitud, longitud, velocidad y dirección del viento, temperatura

= 460.000 items

DatosDatos Binarios

direction speed temperature direction speed temperature

unsigned ints

JSON[10, 1, 100, ...]

DatosDatos Binarios

0

375000

750000

1125000

1500000

Bytes

Binary JSON

Cargar DatosXHR2

var xhr = new XMLHttpRequest();xhr.open('GET', 'http://some.binary.data/', true);

//track file loading progressxhr.addEventListener('progress', function(e) {    console.log(Math.round(e.loaded / e.total * 100));}, false);

//set to receive array bufferxhr.responseType = 'arraybuffer';

//get data when availablexhr.addEventListener('readystatechange', function(e) {    if (xhr.readyState == 4 /* COMPLETE */) {        if (xhr.status == 200 /* OK */) {            //binary data here!            handleBinaryData(xhr.response); //ArrayBuffer        }                        }}, false);

//send requestxhr.send();

Cargar DatosTyped Arrays: Ultra rápidos Arrays

function handleBinaryData(arraybuffer) {    var typedArray = new Uint16Array(arraybuffer);    //do stuff like with a regular array    for (var i = 0, l = typedArray.length; i < l; ++i) {        typedArray[i] += 2;            }}

ArrayBuffer

Uint8Array

Float32Array

Int16Array

etc.

InteracciónHTML5 Forms

<input id='time' type='range' value='0' min='0' max='71' step='1'>

var slider = document.getElementById('time');

slider.addEventListener('change', function(e) {    var value = slider.valueAsNumer;}, false);

Otros tipos: color, date, datetime, email, month, number, range, search, tel, time, url, week, etc.

Rendering

WebGL / 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 */    }  });

HTML5 APIs Puras+

Polyfills+

Lightweight Frameworks

> Monolithic Application Frameworks

ConclusiónEn mi opinión:

Gracias!

@philogb

http://philogb.github.com/