Web designShowcase

Twitter map showcases power of Node.js

Tweetmap is one of the finest Twitter visualisations that we've seen to date. We chat to its creators about how it was put together.

tweetmap
Tweetmap represents countries in the world proportionally based on numbers of tweets

Ever wondered how many tweeters reside in a certain country? Or how often a residents tweet? Well look no further. Tweetmap by Pete Smart and Rob Hawkes represents countries in the world proportionally based on numbers of tweets.

“Tweetmap brings together lots of clever technologies, including TopoJSON, D3.js, Node.js, PhantomJS, and an algorithm to construct contiguous cartograms in real-time," Hawkes explains. "We chose Node.js to power the server side of things as it’s quick, flexible and we already had experience using it to scrape tweets.

tweetmap
To prevent performance problems in the browser, Smart and Hawkes use D3.js on the server

"For rendering and animating the map (in TopoJSON format) on the client we use D3, which is a fantastic library for data visualisation. Specifically, we extensively used the geo module, which allows you to do some complex geographic calculations and conversions”.

To prevent performance problems in the browser, Smart and Hawkes use D3.js on the server to render countries and generate contiguous cartograms. “However, we actually run it on the server using PhantomJS (a ‘headless’ WebKit rendering engine) and transmit the maps back to the client,” says Hawkes.

"This prevents the performance hit experienced when generating the cartograms on the client. “The browser locked up for four seconds,” explains Hawkes.

Like this? Read these!

What do you make of Tweetmap? Let us know in the comments box below!

Subscription offer

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection