This document discusses using JavaScript for data visualization and graphics. It presents examples of collecting video data using HTML5 APIs, transforming the data with Web Workers and typed arrays, rendering 3D scenes with WebGL and PhiloGL, and interacting with forms. The examples show loading weather data and visualizing it over time by interacting with an HTML5 range slider. The conclusion argues that using HTML5 APIs directly with polyfills is preferable to monolithic frameworks for data visualization applications.
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 DB
Datos / 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
8. 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...
});
9. 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;
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);
}
14. Interaction
Forms
Rendering / Interaction
WebGL
Interaction
Forms
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
[10, 1, 100, ...]
JSON
17. Datos
Datos Binarios
Binary JSON
1500000
1125000
750000
375000
0
Bytes
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;
}
}
Uint8Array
Float32Array
ArrayBuffer
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.