Mapping the world with Twitter

May 11th, 2011
Carlo Zapponi

Mapping the world with Twitter
Behind the <canvas> of a HTML5 application

who am I?
@littleark

2

a global innovation ﬁrm
500+ people, 30+ nationalities, 40+ years of global experience

Amsterdam, Netherlands
Munich, Germany
Seattle, WA
Milan, Italy
New York, NY
San Francisco, CA

Austin, TX

Shanghai, China

a world of tweets

8

it was a rainy afternoon...
...when I had the idea of remapping the world through Twitter.

I jumped into fast prototyping
...and I coded a map of falling tweets on a canvas based on the Twitter Stream API

back to o ce they caught me!
and they were excited! The personal sunday project turned into an internal frog project.

<canvas>
HTML5
Twitter Stream API
Geo Locations
Yahoo! Placemaker
Flash *

A World of Tweets
http://www.aworldoftweets.com
Innovative real-time 2/3D info-visualization of activity
in the twitter-sphere

a world of tweets
a real-time data infographics of the twitter sphere

multi layers structure
AWOT is based on a stack of transparent background canvases

system map
geo-located based architecture built on top of the Twitter Stream API and Yahoo!
Placemaker

60+ millions tweets
229 countries
USA, Brazil and Indonesia top
Event related hot spots

worldwide success
AWOT generated more than 30,000 AWOT has been featured on Time
tweets in one week. The web site had Magazine, Tech Crunch, Harvard
more than 75,000 unique visitors during Business Review, PSFK, Chrome
the launch week. Experiments, etc.

SXSW 2011

http://aworldoftweets.com/sxsw

IE9 LAUNCH

http://aworldoftweets.com/ie9

Salone del Mobile

http://aworldoftweets.com/salone

Crowd Tracking Tools
AWOT can be used as a crowd tracking system for urban areas (coming soon).

<canvas>
the good parts

25

Have you written a piece of code with canvas?

Have you deployed a web application with canvas?

the <canvas> element
provides scripts with a resolution-dependent bitmap canvas, which can be used for
rendering graphs, game graphics, or other visual images on the ﬂy.

canvas is part of HTML5
canvas allows drawing
canvas has a simple API

globalAlpha
globalCompositeOperation
strokeStyle
ﬁllStyle
lineWidth
lineCap
lineJoin canvas API is simple to learn
miterLimit 21 attributes and 45 methods

shadowO setX
shadowO setY

draw shapes
draw text
solid and gradient paint
draw and tweak bitmaps
play with videos
apply transformations

canvas has no memory
canvas is not 3D yet
canvas runs in many browsers

IE 9
Firefox 3.0+
Safari 3.0+
Chrome 3.0+
Opera 10.0+
iOS Safari 3.2+
Android 2.1+

highlighting interesting features

AWOT insights

35

function loop(){

ctx.clearRect(0,0,canvas.width,canvas.height);

draw(); //drawing functions

}
setInterval(loop,interval);

clear and redraw
the traditional animation loop through the use of simple shapes

var canvas=document.getElementById(“canvas”),
ctx=canvas.getContext(“2d”);
ctx.globalAlpha=0.5;
ctx.fillStyle=“rgba(255,255,0,0.5)”;
ctx.fillRect(50,50,100,100);

transparency
canvas provides both a global alpha attribute and color based alpha

var ctx=document.getElementById(“canvas”).getContext(“2d”);
ctx.fillStyle=“#ffff00”;
ctx.fillRect(0,0,100,100);
ctx.save();
ctx.fillStyle=“#339933”;
ctx.globalAlpha=0.5;
ctx.fillRect(50,50,100,100);
ctx.restore();
ctx.fillRect(100,100,100,100);

canvas state with save() and restore()
a canvas keeps a stack of states of its main attributes, transformations and clipping

var image=new Image();
image.onload=function(){
drawImage(image,x,y); //placing
drawImage(image,x,y,width,height); //scaling
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight); //slicing
}
img.src=”image.png”;

using images
the canvas element lets you draw images on its surface

var imgData=context.getImageData(left,top,width,height);
var pixelArray=imgData.data; //CanvasPixelArray

manipulatePixels(pixelArray);

context.putImageData(imgData,x,y);

pixel data manipulation
the canvas element lets you play directly with pixels at the byte level

source-over source-atop source-in source-out lighter xor

destination-over destination-atop destination-in destination-out darker copy

globalCompositeOperation
canvas deﬁnes 12 composition operations

lessons learnt through the journey

tricks & tips

42

var canvas=document.createElement(“canvas”);
if(canvas && canvas.getContext(“2d”)) {
//supported
} else {
//not supported
}

always check if canvas is supported.
browser detection is not enough.

faster

slower

size matters.
canvas performances are tightly bound to its size

function loop(){
var bounds=detectBoundingRect();
clearRect(bounds);
draw();
}

refresh only what matters
don’t clear the whole canvas if you can. clear only the area that changed last.

ctx.clearRect(0,0,width,height); //slower

ctx.save();
ctx.globalCompositeOperation=”copy”;
ctx.fillStyle=”#ffffff”; //background color
ctx.fillRect(0,0,width,height); //faster
ctx.restore();

clearRect vs copy
composite operation copy it’s faster with transformations and clipping

function loop(){
draw();
}

setInterval(loop,Math.ceil(1000/60));

you can’t beat the screen
60Hz refresh rate means a frame each 16.7ms
Align animations to the refresh speed (16.7ms=60fps - 33.4ms=30fps)

var thisFrame = new Date().getTime();
var dT = (thisFrame - this.lastFrame)/1000;
this.lastFrame = thisFrame;

sprite.x+= dX * dT; //smooth movement

don’t rely on a given interval
always calculate the real time between two frames to smooth the animations.

var img=ctx.getImageData(0,0,width,height),
data=img.data,
length=data.length,
i=0,a,r,g,b;

while(i<length){
r=data[i-3]; g=data[i-2]; b=data[i-1];
a=data[i]; //alpha
i+=4;
}

video memory is slow
decrease the rate of requests to video memory. save a big chunk of data and use it.

var img=ctx.getImageData(0,0,width,height),
data=img.data,
length=data.length,
i=0,a,r,g,b;

while(i<length){
r=data[i-3]; g=data[i-2]; b=data[i-1];
a=data[i]; //alpha
i+=4;
}

CanvasPixelArray is slow
always cache the data array in a proper javascript object

var backBuffer=document.createElement(“canvas”);
backBuffer.width=context.canvas.width;
backBuffer.height=context.canvas.height;
var bctx=backBuffer.getContext(“2d”);

drawOnBackBuffer();

context.drawImage(backBuffer,0,0);

if makes sense then double bu er
decrease the rate of requests to video memory. save a big chunk of data and use it.

canvas shapes drawing double bu er pixel
size functions with drawImage manipulation

59fps 59fps 55fps
100px x 100px
10% 10% 15%

52fps 56fps 24fps
500px x 500px 70%
20% 38%

50fps 44fps 9fps
1000px x 1000px
40% 50% 92%

comparison: FPS and CPU %
http://jsperf.com/vsummit-canvas-perf/5

.gpu {
-webkit-transform: rotate3d(0,0,1, 0deg);
-moz-transform: rotate3d(0,0,1, 0deg);
transform: rotate3d(0,0,1, 0deg);
}

hardware acceleration
HTML5 supports GPU accelerated operations.
To be use only if you experience a true performance win. It might not be better.

don’t trust me. experiment always
these tips are generally useful but di erent situations may need di erent solutions.
Now go and try yourself ﬁnding new ways to improve your stu .

carlo.zapponi@frogdesign.com
@littleark
aworldoftweets.com

Mapping the world with Twitter

More Related Content

Similar to Mapping the world with Twitter

Recently uploaded

Mapping the world with Twitter