Your SlideShare is downloading. ×
  • Like
Exploring Web standards for data visualization
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Exploring Web standards for data visualization

  • 2,008 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,008
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
32
Comments
0
Likes
6

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. Exploring Web Standards for Data Visualization Nicolas Garcia Belmonte @philogbThursday, February 28, 13
  • 2. Nicolas Garcia Belmonte @philogbThursday, February 28, 13
  • 3. Why so many standards for Graphics? SVG WebGL HTML 2D Canvas CSS JavaScriptThursday, February 28, 13
  • 4. What is the right standard for my Visualization? SVG WebGL HTML 2D Canvas CSS JavaScriptThursday, February 28, 13
  • 5. Political Engagement MapThursday, February 28, 13
  • 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. HTML / SVG Good for a small # of simple-to-complex shaped interactive elementsThursday, February 28, 13
  • 8. Mobility Flow in France Per State and County Mobility Data for FranceThursday, February 28, 13
  • 9. Thursday, February 28, 13
  • 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. Mobility Flow in France Take 1 SVGThursday, February 28, 13
  • 12. Use SVG to render the MapThursday, February 28, 13
  • 13. Failed AttemptThursday, February 28, 13
  • 14. Mobility Flow in France Take 2 2D Canvas / CSS3Thursday, February 28, 13
  • 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. Mobility Flow in France Canvas / CSS3Thursday, February 28, 13
  • 17. Mobility Flow in France Images to render the Map outline data pickingThursday, 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 <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. 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. 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. 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. 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 managementThursday, February 28, 13
  • 25. WebGLThursday, February 28, 13
  • 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. How does WebGL work? The 3D scene image source: http://computer.yourdictionary.com/graphicsThursday, February 28, 13
  • 28. How does WebGL Scale? Examples using PhiloGLThursday, 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 itemsThursday, February 28, 13
  • 31. Thursday, February 28, 13
  • 32. Going 3DThursday, February 28, 13
  • 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. 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. Thanks @philogb http://philogb.github.com/Thursday, February 28, 13