Tag Archives: socket.io

Datavisualization with Angular and d3 on the Twitter Stream API

AngularJS, , ,

ngTopheman

It’s been a few months since I wanted to make a data visualization project based on Angular and d3. The one thing that was missing was some data to work with …

I tried to find something that fit me on open-data sites but I was unsuccessful. I finally had the idea to use the Twitter Stream API, which would get me lots of data to process and moreover, in realtime …

To handle the tweets post-processing part, I built a node module : twitter-stream-channels that I plugged to socket.io and express to send processed data from the Twitter Stream API to the frontend via the node server.

Finally on my Angular app, I made a service that handles the transport/persistance layer to share the realtime data collected from the websockets to the d3 directive. All of them are home made and responsive.

I was looking for a project where I could train myself mixing Angular and d3 … I ended up doing a little more backend thant I thought 😉 …

Tophe

Try Topheman Datavisual

PS : See the README on the github repository of the project for further informations about the implementation.

Playground 2

Experiments, , , ,

topheman-playground-bandeau

This project is more an experiment than really a game (it could lead to a game though). The concept is :

  • you open the website on your desktop browser
  • you snap the QR code with your smartphones (yours and friends’s or coworkers’s)
  • then you control your ball which is on the desktop monitor by tilting your phone … like a wiimote.

This is multiplayer (each player has a ball of a certain color – moving on the monitor and identified on his phone), there is a little chat (if you play with multiple monitors).

If you don’t have any phone, you can even run the device motion emulator ! (thanks to remote-tilt).

It runs with :

  • NodeJS
  • Express
  • socket.io
  • Ball.js

The site is hosted on a free heroku instance (I recently enabled the WebSockets which weren’t available on heroku before – caused socket.io to fallback to xhr polling) so it’s not the best server ever, but it does the job for the demo …

The source code is on github, it’s MIT licensed if you want to fork it or whatever.

I’m aware it’s not perfect (if you’re on multiple monitors, you may experiment little display differences), but it could lead to an idea of game or whatever …!

Tophe

Test Topheman Playground 2

PS : Besides of socket.io and little bugs I had to deal with (such as the express sessions linked to the sockets), this project forced me to learn how to publish a project on heroku, which is (when you never have done it before) not something as easy as uploading your files via ftp like you would for a php project for example 🙂 …

Continue reading →