Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript paraGrá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 I...
Visualización en la Web con JavaScript                            Extraer                            Gather       DBDatos ...
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="...
Transformación de Datos               Obtener pixel data usando 2D Canvas<canvas id="pastie" width="50" height="50" style=...
Crear Modelos 3D                               Web Workersvar worker = new Worker(task.js);worker.addEventListener(message...
Renderear la Escena       Canvas / WebGL / PhiloGL   function loop() {     //send data to GPU     program.setUniform(size,...
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 vie...
Datos                    Datos Binariosdirection   speed   temperature   direction   speed   temperature                  ...
Datos          Datos Binarios             Binary           JSON15000001125000 750000 375000      0                      By...
Cargar Datos                       XHR2var xhr = new XMLHttpRequest();xhr.open(GET, http://some.binary.data/, true);//trac...
Cargar DatosTyped Arrays: Ultra rápidos Arraysfunction handleBinaryData(arraybuffer) {    var typedArray = new Uint16Array...
Interacción                                 HTML5 Forms     <input id=time type=range value=0 min=0 max=71 step=1>        ...
  //Create application  PhiloGL(canvasId, {    program: {      from: uris,      vs: shader.vs.glsl,                       ...
Conclusión                    En mi opinión:   HTML5 APIs Puras           +        Polyfills           +                   ...
Gracias!@philogbhttp://philogb.github.com/
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
Upcoming SlideShare
Loading in …5
×

JavaScript para Graficos y Visualizacion de Datos

4,845 views

Published on

Published in: Technology
  • Be the first to comment

JavaScript para Graficos y Visualizacion de Datos

  1. 1. JavaScript paraGráficos y Visualización de Datos Nicolas Garcia Belmonte - @philogb
  2. 2. Uso estándares web para crear visualizaciones de datos. @philogb
  3. 3. Soy el autor de dos frameworks de visualización en JavaScript PhiloGL JavaScript InfoVis Toolkit
  4. 4. 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
  5. 5. Primer Ejemplo
  6. 6. Data SourceVideo / Camera Rendering WebGL Interaction Forms
  7. 7. 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...});
  8. 8. 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;
  9. 9. 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);});
  10. 10. 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);   }
  11. 11. Segundo Ejemplo
  12. 12. Interaction Forms Rendering / Interaction WebGL Interaction Forms
  13. 13. Datos• 1200 estaciones de meteorología• 72 horas de datos• 5 variables - latitud, longitud, velocidad y dirección del viento, temperatura = 460.000 items
  14. 14. Datos Datos Binariosdirection speed temperature direction speed temperature unsigned ints [10, 1, 100, ...] JSON
  15. 15. Datos Datos Binarios Binary JSON15000001125000 750000 375000 0 Bytes
  16. 16. 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();
  17. 17. 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.
  18. 18. 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.
  19. 19.   //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 */    }  });
  20. 20. Conclusión En mi opinión: HTML5 APIs Puras + Polyfills + > Monolithic Application FrameworksLightweight Frameworks
  21. 21. Gracias!@philogbhttp://philogb.github.com/

×