Javascript para Gráficos y Visualización de Datos

Presentación para el JSHangouts-BogotaJS de Nicolás García Belmonte

Transcript

1. JavaScript para Gráficos y Visualización de Datos Nicolas Garcia Belmonte - @philogb
2. Uso estándares web para crear visualizaciones de datos. @philogb
3. Soy el autor de dos frameworks de visualización en JavaScript PhiloGL JavaScript InfoVis Toolkit
4. 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
5. Primer Ejemplo
7. Data Source Video / Camera Interaction Forms Rendering WebGL
8. 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... });
9. 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
10. Crear Modelos 3D Web 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.js self.addEventListener('message', function(e) { var models; //build models... self.postMessage(models); });
11. 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); }
12. Segundo Ejemplo
14. Interaction Forms Interaction Forms Rendering / Interaction WebGL
15. Datos • 1200 estaciones de meteorología • 72 horas de datos • 5 variables - latitud, longitud, velocidad y dirección del viento, temperatura = 460.000 items
16. Datos Datos Binarios direction speed temperature direction speed temperature unsigned ints JSON [10, 1, 100, ...]
17. Datos Datos Binarios 0 375000 750000 1125000 1500000 Bytes Binary JSON
18. Cargar Datos XHR2 var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://some.binary.data/', true); //track file loading progress xhr.addEventListener('progress', function(e) { console.log(Math.round(e.loaded / e.total * 100)); }, false); //set to receive array buffer xhr.responseType = 'arraybuffer'; //get data when available xhr.addEventListener('readystatechange', function(e) { if (xhr.readyState == 4 /* COMPLETE */) { if (xhr.status == 200 /* OK */) { //binary data here! handleBinaryData(xhr.response); //ArrayBuffer } } }, false); //send request xhr.send();
19. Cargar Datos Typed 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.
20. 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.
21. 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 */ } });
22. HTML5 APIs Puras + Polyfills + Lightweight Frameworks > Monolithic Application Frameworks Conclusión En mi opinión:
24. Gracias! @philogb http://philogb.github.com/