Exploring Web standards for data visualization
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Exploring Web standards for data visualization

on

  • 2,585 views

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

Statistics

Views

Total Views
2,585
Views on SlideShare
2,487
Embed Views
98

Actions

Likes
6
Downloads
30
Comments
0

5 Embeds 98

https://twitter.com 65
http://eventifier.co 22
http://eventifier.com 6
http://localhost 4
http://ec2-54-243-189-159.compute-1.amazonaws.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Exploring Web standards for data visualization Presentation 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