Your SlideShare is downloading. ×
0
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript para Graficos y Visualizacion de Datos - BogotaJS

1,047

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,047
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript paraGrá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 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. Primer Ejemplo
  • 6. Data SourceVideo / Camera Rendering WebGL Interaction Forms
  • 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: true }, function(localMediaStream) {    video.src = window.URL.createObjectURL(localMediaStream);}, function() {    //error...});
  • 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. 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. 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. Segundo Ejemplo
  • 12. Interaction Forms Rendering / Interaction WebGL Interaction Forms
  • 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. Datos Datos Binariosdirection speed temperature direction speed temperature unsigned ints [10, 1, 100, ...] JSON
  • 15. Datos Datos Binarios Binary JSON15000001125000 750000 375000 0 Bytes
  • 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. 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. 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.   //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. Conclusión En mi opinión: HTML5 APIs Puras + Polyfills + > Monolithic Application FrameworksLightweight Frameworks
  • 21. Gracias!@philogbhttp://philogb.github.com/

×