0
Exploring Web                            Standards for Data                               Visualization                   ...
Nicolas Garcia Belmonte                                   @philogbThursday, February 28, 13
Why so many standards                     for Graphics?                            SVG     WebGL                          ...
What is the right standard          for my Visualization?                            SVG     WebGL                        ...
Political Engagement MapThursday, February 28, 13
Tweet Histogram            Choropleth Map              Visual Component                  # of Elements       Small (~40)  ...
HTML / SVG               Good for a small # of simple-to-complex shaped                            interactive elementsThu...
Mobility Flow in France                  Per State and County Mobility Data for FranceThursday, February 28, 13
Thursday, February 28, 13
Mobility Flow in France                  Per State and County Mobility Data for France                            Visual C...
Mobility Flow in France                            Take 1                            SVGThursday, February 28, 13
Use SVG to render the MapThursday, February 28, 13
Failed AttemptThursday, February 28, 13
Mobility Flow in France                                  Take 2                            2D Canvas / CSS3Thursday, Febru...
Mobility Flow in France                            Take 2 - 2D Canvas / CSS3           • Use Layered Images to render the ...
Mobility Flow in France                            Canvas / CSS3Thursday, February 28, 13
Mobility Flow in France                               Images to render the Map                     outline             dat...
Mobility Flow in France                   Canvas Color Picking for fast Interaction Each State and County is assigned a un...
Canvas                                            An HTML Element                       <canvas id=map width=500 height=50...
2D Canvas Color Picking for fast Interaction                            Offline: Encode index to county data array in color...
CSS3 for Zooming                                   CSS transition definition                             1 .maps {         ...
Mobility Flow in France                            CSS Transitions for Zooming          • Not good for synchronized / resp...
Almost had it...Thursday, February 28, 13
Mobility Flow in France                            WebGL     •Same image tile principle     •More control on animations   ...
WebGLThursday, February 28, 13
How does WebGL work?                                       ...and why is it so fast?                                      ...
How does WebGL work?                            The 3D scene                                      image source: http://com...
How does WebGL Scale?                            Examples using PhiloGLThursday, February 28, 13
Thursday, February 28, 13
Data Facts                            • 1200 weather stations                            • 72 hours of data               ...
Thursday, February 28, 13
Going 3DThursday, February 28, 13
  //Create application       PhiloGL(canvasId, {         program: {           from: uris,           vs: shader.vs.glsl,   ...
When choosing a Standard for                    your Viz you could start by                      asking yourself about... ...
Thanks                                @philogb                            http://philogb.github.com/Thursday, February 28,...
Upcoming SlideShare
Loading in...5
×

Exploring Web standards for data visualization

2,116

Published on

Slides from the talk at Strata 2013 in Santa Clara, CA. More info on the talk here: http://strataconf.com/strata2013/public/schedule/detail/26659

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

No Downloads
Views
Total Views
2,116
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
32
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Exploring Web standards for data visualization"

  1. 1. Exploring Web Standards for Data Visualization Nicolas Garcia Belmonte @philogbThursday, February 28, 13
  2. 2. Nicolas Garcia Belmonte @philogbThursday, February 28, 13
  3. 3. Why so many standards for Graphics? SVG WebGL HTML 2D Canvas CSS JavaScriptThursday, February 28, 13
  4. 4. What is the right standard for my Visualization? SVG WebGL HTML 2D Canvas CSS JavaScriptThursday, February 28, 13
  5. 5. Political Engagement MapThursday, February 28, 13
  6. 6. Tweet Histogram Choropleth Map Visual Component # of Elements Small (~40) Small (~50) Complex: (Concave, Convex, Shape Complexity Simple: (Rectangle) Connected, Disconnected) Interactive Yes Yes Standard Chosen HTML SVGThursday, February 28, 13
  7. 7. HTML / SVG Good for a small # of simple-to-complex shaped interactive elementsThursday, February 28, 13
  8. 8. Mobility Flow in France Per State and County Mobility Data for FranceThursday, February 28, 13
  9. 9. Thursday, February 28, 13
  10. 10. Mobility Flow in France Per State and County Mobility Data for France Visual Component Choropleth Map # of Elements Medium/Big: ~40.000. US has only ~3.000. Complex: (Concave, Convex, Connected, Shape Complexity Disconnected) Interactive Yes Standard Chosen ?Thursday, February 28, 13
  11. 11. Mobility Flow in France Take 1 SVGThursday, February 28, 13
  12. 12. Use SVG to render the MapThursday, February 28, 13
  13. 13. Failed AttemptThursday, February 28, 13
  14. 14. Mobility Flow in France Take 2 2D Canvas / CSS3Thursday, February 28, 13
  15. 15. Mobility Flow in France Take 2 - 2D Canvas / CSS3 • Use Layered Images to render the Map • Canvas Color Picking for Interaction • CSS Transitions / Transforms for Zooming / PanningThursday, February 28, 13
  16. 16. Mobility Flow in France Canvas / CSS3Thursday, February 28, 13
  17. 17. Mobility Flow in France Images to render the Map outline data pickingThursday, February 28, 13
  18. 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. 19. Canvas An HTML Element <canvas id=map width=500 height=500></canvas> In which you can paste images 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 }; And then retrieve it’s pixels var pixelArray = ctx.getImageData(0, 0, width, height);Thursday, February 28, 13
  20. 20. 2D Canvas Color Picking for fast Interaction Offline: Encode index to county data array in colors 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 }); Online: Decode RGB color to array index 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 }Thursday, February 28, 13
  21. 21. CSS3 for Zooming CSS transition definition 1 .maps { 2 transition: transform ease-out 500ms; 3 } 4 Set CSS transform via JavaScript2 var style = map.style;3 style.transform = translate( + dx + px, + dy + px) scale( + s + );Thursday, February 28, 13
  22. 22. Mobility Flow in France CSS Transitions for Zooming • Not good for synchronized / responsive animations • GPU compositing messes up images when scalingThursday, February 28, 13
  23. 23. Almost had it...Thursday, February 28, 13
  24. 24. Mobility Flow in France WebGL •Same image tile principle •More control on animations •More control on GPU managementThursday, February 28, 13
  25. 25. WebGLThursday, February 28, 13
  26. 26. How does WebGL work? ...and why is it so fast? JavaScript WebGL JS API GLSL API Vertex Shader GLSL API Fragment ShaderThursday, February 28, 13
  27. 27. How does WebGL work? The 3D scene image source: http://computer.yourdictionary.com/graphicsThursday, February 28, 13
  28. 28. How does WebGL Scale? Examples using PhiloGLThursday, February 28, 13
  29. 29. Thursday, February 28, 13
  30. 30. Data Facts • 1200 weather stations • 72 hours of data • 5 variables - latitude, longitude, speed & wind direction, temperature = 460.000 itemsThursday, February 28, 13
  31. 31. Thursday, February 28, 13
  32. 32. Going 3DThursday, February 28, 13
  33. 33.   //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 */     }   });Thursday, February 28, 13
  34. 34. When choosing a Standard for your Viz you could start by asking yourself about... # of Elements Small, Large Shape Complexity Simple, Complex Interaction Yes, No Animation Yes, No Compatibility Desktop, Mobile, Browsers, etc. Libraries d3js, three.js, etc.Thursday, February 28, 13
  35. 35. Thanks @philogb http://philogb.github.com/Thursday, February 28, 13
  1. A particular slide catching your eye?

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

×