Exploring Web standards for data visualization

Exploring Web Standards for Data

Visualization

Nicolas Garcia Belmonte

@philogb

Thursday, February 28, 13

Nicolas Garcia Belmonte

@philogb

Thursday, February 28, 13

Why so many standards for Graphics?

SVG

CSS

2D Canvas

WebGL

HTML

JavaScript

Thursday, February 28, 13

What is the right standard for my Visualization?

SVG

CSS

2D Canvas

WebGL

HTML

JavaScript

Thursday, February 28, 13

Political Engagement Map

Thursday, February 28, 13

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

Good for a small # of simple-to-complex shaped interactive elements

HTML / SVG

Thursday, February 28, 13

Mobility Flow in France

Per State and County Mobility Data for France

Thursday, February 28, 13

Thursday, February 28, 13

Mobility Flow in FrancePer 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

Mobility Flow in France

SVG

Take 1

Thursday, February 28, 13

Use SVG to render the MapThursday, February 28, 13

Failed Attempt

Thursday, February 28, 13

Mobility Flow in France

2D Canvas / CSS3

Take 2

Thursday, February 28, 13

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

Mobility Flow in FranceCanvas / CSS3

Thursday, February 28, 13

Mobility Flow in FranceImages to render the Map

outline data picking

Thursday, February 28, 13

Mobility Flow in FranceCanvas 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

CanvasAn 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

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

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

Mobility Flow in FranceCSS Transitions for Zooming

• Not good for synchronized / responsive animations• GPU compositing messes up images when scaling

Thursday, February 28, 13

Almost had it...

Thursday, February 28, 13

Mobility Flow in FranceWebGL

•Same image tile principle

•More control on animations

•More control on GPU management

Thursday, February 28, 13

WebGLThursday, February 28, 13

JavaScript

Fragment Shader

WebGL JS API

Vertex ShaderGLSL API

GLSL API

How does WebGL work?...and why is it so fast?

Thursday, February 28, 13

image source: http://computer.yourdictionary.com/graphics

The 3D scene

How does WebGL work?

Thursday, February 28, 13

How does WebGL Scale?Examples using PhiloGL

Thursday, February 28, 13

Thursday, February 28, 13

Data Facts

• 1200 weather stations

• 72 hours of data

• 5 variables - latitude, longitude, speed & wind direction, temperature

= 460.000 items

Thursday, February 28, 13

Thursday, February 28, 13

Going 3D

Thursday, February 28, 13

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

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

@philogb

Thanks

http://philogb.github.com/

Thursday, February 28, 13