All posts by Tophe

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.

twitter-stream-channels

Experiments,

twitter-stream-channels

With the Twitter Stream API, you can only open one stream at a time, so if you want to track different kinds of keywords (aka channels), all the tweets in result will be mixed up and you’ll need to do some post-processing to identify which tweet belongs to which channels.

I needed that kind of feature for my next project, so I decided to make a module out of it. Feel free to use it. Some infos you might be interested in :

  • The API documentation (generated from source code with yuidoc)
  • The github repo (with the README)
  • twitter-stream-channels on npm – npm install twitter-stream-channels
  • The module has a complete built-in mock version accessible via .getMockedClass() that will let you use it without connecting to Twitter (usefull because of their connexion limit)
  • It also is unit-tested, if you want to contribute (first time I made unit-tests on node with mocked data dispatched by events – by the way, I improved test’s speed using process.nextTick instead of setTimeout in mocked mode).

I’m currently working on a project based on twitter-stream-channels that I wil release in a few weeks.

Tophe

edit : I just released the project I was talking about. More about it on this post.

Take a tour of the campuses of the International University of Paris with Topheman Street View

Experiments,

About six months ago, I released Topheman Street View, a site that will let you browse the Google streetview panoramas with your smartphone/tablet like you were inside it, just by moving your phone like a window to the world – more on this post.

Two days ago, I saw this tweet by @GautierBarbe on my timeline about the International University Campus of Paris opening their buildings to Google streetview.

@GautierBarbe - tweet

It drew my attention and tickled me … This was a perfect use case to demonstrate the benefits of PanoramaSensorsViewer (the library I made on which Topheman Street View is based).

So, you can take a tour of the different campuses on Topheman Street View by following those links :

I simply used the bookmarklet I made that is available on the home page of the Topheman Street View site in desktop mode that you can use when you’re on google maps and will let you generate a link as well as a QRCode to the panorama …

Tophe

Cone.js – my first steps on BabylonJS

Experiments,

babylonjs-first-steps-cone

It’s been a while since I wanted to try BabylonJS, but as all of you, I had some projects on the run that I wanted to finish AND release ;).

So finally, two months ago, I took the time to start a little project, only to discover the framework, with the usual tutorials like creating spheres, cubes, adding lights and camera. I even installed blender to do some 3d modelling in order to get an export (nothing extraordinary – it’s a pity, I used to be good at that, but it was ten years ago on 3dsMax …).

After the tutorials, I needed an idea to start with. About two years ago, I made a little ThreeJS project presenting one of the roller skating slalom cones I used to draw on my comic strips.

I started the project without any clue of where I was heading (the goal was to discover BabylonJS), I had in mind to make some kind of game out of it, but that was all …

I ended up making Cone.js, a class that lets you manage those 3d cones I told you about, but I did much more than I thought at the beginning :

  • extension possibilities of the Class (like the jQuery.fn)
  • methods not only available on cone instances but also on cone lists
  • animation queue management (even custom user queues)
  • tried both jsdoc and yuidoc documention generators (finally kept yuidoc)

TRY IT

Continue reading →

Topheman Cycle Infos

AngularJS,

I wanted to make a real AngularJS app (something more than the usual todolist we’ve all done 😉 ), so all I needed was to finish my ongoing personal projects and find an idea of an app that I could focus on the frontend part. This is how I came with Topheman Cycle Infos.

If you browse the source code or the README, you’ll see that I followed the Yeoman workflow, in order to master multiple tools such as :

  • yeoman / grunt / bower stack
  • sass / bootstrap (I wanted to checkout the bootstrap framework – not so fond of it …)
  • google maps API (I got some expertise, making Topheman Street View)
  • deploy to heroku (a part we dont talk enough : the deployment of a NodeJS app)
  • i18n (not really a tool, but I wanted the app in multiple languages – thanks to angular-translate)

This app will tell you the availability of bikes and bike’s stands of the bike’s JCDecaux network in real time in any of their towns.

Try Topheman Cycle Infos

For the deployment to heroku of a yeoman fullstack based project, I invite you to checked out Creating Apps with Angular and Node using Yeoman.

Tophe

Disclaimer : The design is responsive (it would work on a tablet or mobile), but showing the map of the bike’s stations of Paris may slow down your mobile browser (this is a too many markers problem that I am aware of, but sadly, it would make no sense to cluster them nor take cpu time to process which markers to show or hide). Maybe when I’ll have more time I’ll fix this bug.