JavaScript para Graficos y Visualizacion de Datos

JavaScript paraGráﬁcos 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 Extraer Gather DBDatos / Servidor / Transformar Transform Python Cliente Servir Serve JSON / Binary Cargar Data Load Datos XHR2 Build Models Crear Modelos Workers / TypedArrays Viz / Cliente Renderear Render WebGL / 2D Canvas Interactuar Interact DOM Events / HTML Forms

Primer Ejemplo

Data SourceVideo / Camera Rendering WebGL Interaction Forms

Recolección de Datos HTML5 Video & Media Source<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>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...});

Transformación de Datos 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;

Crear Modelos 3D Web Workersvar worker = new Worker(task.js);worker.addEventListener(message, function(e) { var models = e.data; //do something with the models once theyre built...}, false);worker.postMessage();//in task.jsself.addEventListener(message, function(e) { var models; //build models... self.postMessage(models);});

Renderear la Escena Canvas / 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

Interaction Forms Rendering / Interaction WebGL Interaction Forms

Datos• 1200 estaciones de meteorología• 72 horas de datos• 5 variables - latitud, longitud, velocidad y dirección del viento, temperatura = 460.000 items

Datos Datos Binariosdirection speed temperature direction speed temperature unsigned ints [10, 1, 100, ...] JSON

Datos Datos Binarios Binary JSON15000001125000 750000 375000 0 Bytes

Cargar Datos XHR2var 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 Arraysfunction 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; }} Uint8Array Float32Array ArrayBuffer Int16Array etc.

Interacción HTML5 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.

//Create application PhiloGL(canvasId, { program: { from: uris, vs: shader.vs.glsl, WebGL / PhiloGL fs: shader.fs.glsl }, Rendering 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 */ } });

Conclusión En mi opinión: HTML5 APIs Puras + Polyﬁlls + > Monolithic Application FrameworksLightweight Frameworks

Gracias!@philogbhttp://philogb.github.com/

http://localhost	21
http://candidosg.com	4
http://jp.flavors.me	3
http://flavors.me	3
http://fr.flavors.me	2
http://claritty.com	1
http://de.flavors.me	1

JavaScript para Graficos y Visualizacion de Datos

by philogb on May 19, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 35

Statistics

JavaScript para Graficos y Visualizacion de Datos Presentation Transcript