Data visualisation is not something that grabs peoples attention as a sexy subject, however, there is some cool stuff you can do to visualise data, which makes it a fun project! First of all, what is data visualisation exactly?

Well, good old Wikipedia states that:

“Data visualization is viewed by many disciplines as a modern equivalent of visual communication. It involves the creation and study of the visual representation of data.”

Cool – so why on earth did I choose this topic? Well, after writing about my bath bomb simulation, I was inspired to attempt more Creative Coding. I decided to explore Github to see if there were any cool projects that I could experiment with, to merge with Twitter data. I ended up finding a cool JS file that allowed for some cool colour transitions.

My goal was to speed up/slow down the colour transitions based on data mined from Twitter. I won’t go into detail about the Twitter API, all I will say is that if you’re looking to get live data to manipulate, you want to tap into Twitter’s stream API. There are tons of projects online which go into detail on how to do this, Tweepy is a good library if you want to go down the Python route, but connections can also be made through Node.JS, PHP and others.

To bring my idea to life, I first needed to collect tweets based on a chosen hashtag(s) – once my script was set-up, I could then execute it and watch the data come in. Due to high volume of tweets, it was necessary to output the tweets into a file and then query the file every 15 seconds (normally, I would handle the tweets with the use of a database, but as I was only collecting a small number of tweets – no more than 200, a JSON file was fine as this was only meant to be a small concept idea).

I would then check the file and count the number of users tweeting about my desired hashtags. I now had an integer that I could store in a variable to manipulate the animation – like so:

//text refers to the callback function, returning the text scanned
var occurences = (text.match(/"user"/g) || []).length;

if(occurences < 10){
occurences = 1500; transition(canvas, {count: 200, color: '#ff0', direction: 'hm', onfinished: function () {drawSecond(occurences)}, duration: occurences}); }else if....

On each callback of the transition function, I would call the next transition (there are five in total) and after 15 seconds the script will run again collecting more data.

Once more than 200 occurrences of the word user has been found, the JSON file will be cleared and the loop will begin again. This little project has been fun as it has introduced me to the Twitter Stream API and allowed me to visualise data in a cool way.

This project was not intended for any production use, so has been poorly optimised, but it is a cool proof of concept. I think I will explore more of the Twitter API and try to build other small projects to learn and improve in this area.

Below you can see the end results of this small application. I simply run the script and in the terminal window, you can see all the tweets that were collected, then after 15 seconds, the data is analysed and will have an effect on the speed of the colour transitions. In the console log, you can see the
occurrence value rise, which has an effect on the speed of the colour transitions!

I hope you enjoy it! I still have lots to share, so I will aim to sit down and write another blog soon!

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.