Exploring Web Standards for Data Visualization

Talk at Strata in Santa Clara, CA on February 2013

Transcript

1. Exploring Web Standards for Data Visualization Nicolas Garcia Belmonte @philogb Thursday, February 28, 13
2. Nicolas Garcia Belmonte @philogb Thursday, February 28, 13
3. Why so many standards for Graphics? SVG CSS 2D Canvas WebGL HTML JavaScript Thursday, February 28, 13
4. What is the right standard for my Visualization? SVG CSS 2D Canvas WebGL HTML JavaScript Thursday, February 28, 13
5. Political Engagement Map Thursday, February 28, 13
6. Visual Component # of Elements Shape Complexity Interactive Standard Chosen Tweet Histogram Choropleth Map Small (~40) Small (~50) Simple: (Rectangle) Complex: (Concave, Convex, Connected, Disconnected) Yes Yes HTML SVG Thursday, February 28, 13
7. Good for a small # of simple-to-complex shaped interactive elements HTML / SVG Thursday, February 28, 13
8. Mobility Flow in France Per State and County Mobility Data for France Thursday, February 28, 13
9. Thursday, February 28, 13
10. Mobility Flow in France Per State and County Mobility Data for France Visual Component # of Elements Shape Complexity Interactive Standard Chosen Choropleth Map Medium/Big: ~40.000. US has only ~3.000. Complex: (Concave, Convex, Connected, Disconnected) Yes ? Thursday, February 28, 13
11. Mobility Flow in France SVG Take 1 Thursday, February 28, 13
12. Use SVG to render the Map Thursday, February 28, 13
13. Failed Attempt Thursday, February 28, 13
14. Mobility Flow in France 2D Canvas / CSS3 Take 2 Thursday, February 28, 13
15. Mobility Flow in France • Use Layered Images to render the Map • Canvas Color Picking for Interaction • CSS Transitions / Transforms for Zooming / Panning Take 2 - 2D Canvas / CSS3 Thursday, February 28, 13
16. Mobility Flow in France Canvas / CSS3 Thursday, February 28, 13
17. Mobility Flow in France Images to render the Map outline data picking Thursday, February 28, 13
18. Mobility Flow in France Canvas Color Picking for fast Interaction Each State and County is assigned a unique (r, g, b, a) tuple. We can encode up to 256^4 -1 data elements. Thursday, February 28, 13
19. Canvas An HTML Element In which you can paste images <canvas id='map' width='500' height='500'></canvas> 1 var canvas = document.querySelector('#map'), 2 ctx = canvas.getContext('2d'), 3 img = new Image(); 4 5 img.src = 'map.jpg'; 6 img.onload = function() { 7 ctx.drawImage(img, 0, 0); 8 }; var pixelArray = ctx.getImageData(0, 0, width, height); And then retrieve it’s pixels Thursday, February 28, 13
20. 2D Canvas Color Picking for fast Interaction 3 counties.forEach(function(county, i) { 4 var r = i % 256, 5 g = ((i / 256) >>> 0) % 256, 6 b = ((i / (256 * 256)) >>> 0) % 256; 7 8 county.setAttribute('fill', 'rgb(' + r + ',' + g + ',' + b + ')'); 9 }); 1 //decode index from image 2 function getCounty(canvas, counties, x, y) { 3 var imageData = canvas.getImageData(), 4 width = imageData.width, 5 data = imageData.data, 6 index = (x + y * width) * 4, //RGBA components 7 r = data[index], 8 g = data[index + 1], 9 b = data[index + 2], 10 i = r + (g + b * 256) * 256; 11 12 return counties[i]; 13 } Offline: Encode index to county data array in colors Online: Decode RGB color to array index Thursday, February 28, 13
21. CSS3 for Zooming 1 .maps { 2 transition: transform ease-out 500ms; 3 } 4 2 var style = map.style; 3 style.transform = 'translate(' + dx + 'px,' + dy + 'px) scale(' + s + ')'; CSS transition definition Set CSS transform via JavaScript Thursday, February 28, 13
22. Mobility Flow in France CSS Transitions for Zooming • Not good for synchronized / responsive animations • GPU compositing messes up images when scaling Thursday, February 28, 13
23. Almost had it... Thursday, February 28, 13
24. Mobility Flow in France WebGL •Same image tile principle •More control on animations •More control on GPU management Thursday, February 28, 13
25. WebGL Thursday, February 28, 13
26. JavaScript Fragment Shader WebGL JS API Vertex Shader GLSL API GLSL API How does WebGL work? ...and why is it so fast? Thursday, February 28, 13
27. image source: http://computer.yourdictionary.com/graphics The 3D scene How does WebGL work? Thursday, February 28, 13
28. How does WebGL Scale? Examples using PhiloGL Thursday, February 28, 13
29. Thursday, February 28, 13
30. Data Facts • 1200 weather stations • 72 hours of data • 5 variables - latitude, longitude, speed & wind direction, temperature = 460.000 items Thursday, February 28, 13
31. Thursday, February 28, 13
32. Going 3D Thursday, February 28, 13
33. 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 */ } }); Thursday, February 28, 13
34. When choosing a Standard for your Viz you could start by asking yourself about... # of Elements Shape Complexity Interaction Animation Compatibility Libraries Small, Large Simple, Complex Yes, No Yes, No Desktop, Mobile, Browsers, etc. d3js, three.js, etc. Thursday, February 28, 13
35. @philogb Thanks http://philogb.github.com/ Thursday, February 28, 13