javascript para graficos y visualizacion de datos - bogotajs
DESCRIPTION
TRANSCRIPT
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': true }, 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/