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

3,886

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,886
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×