MMXII Hackathon - Tak’s thoughts.
To follow up on Mark’s post about the Londinium MMXII hackathon, here is my side. The event was really great fun, and it was awesome getting into the hacking spirit amongst other keen developers, designers and technologists.
I set out wanting to expand on my experience with d3 from the Olympics medal visualisation I did, and found a couple of others who shared my interests in d3 and visualisation in general. The group I started with, in full Olympic spirit, was a bit of an international affair, with a Brit (Jamie), a Spaniard (Andrew), a Japanese (Tatsuya) and an Australian (me).
We started out a bit stuck as to what to visualise, but after a couple of sessions of brainstorming, mood lighting of the love room, and some tooling support from Google docs, we came up with a decent list of ideas. From there we decided to split into 2 groups to execute 2 of them.
Jamie and Andrew paired up and did a nice visualisation questioning whether the GDP of a country affects the number of medals won. In the end, they came 2nd place too!
Tatsuya and I looked into a more simple visualisation, to see whether there were more positive or negative tweets about the olympics. Partly inspired by the stereotype of the Brits always complaining about everything, we wanted to see whether that were true. We did this by hooking up to the twitter stream using datasift (a sponsor of the day), which also gave us sentiment analysis (to determine if the tweets were positive, negative or neutral) and let us filter by olympic related tweets. This gave us a stream of positive and negative tweets which were then pushed to our d3 visualisation using another sponsored service of the day, pusher. Pusher handled all the publishing and subscribing between the backend and frontend, and gave us a simple api to hook them up (only a couple lines of code!). On the d3 side, I whipped up a force layout, which showed 2 bubbles one for positivity and one for negativity. They would grow and shrink depending on the proportion of positive and negative tweets, and could be agitated by mouse movements, but would be attracted to each other when there was no interaction.
This was the outcome (warning: developer design ahead):
The blue shows the positive, and the red shows negative, with the tweet also shown on the bottom. As you can see, from our unscientific visualisation, there is definitely a larger proportion of positivity!
As a last minute follow up hack, Tatsuya also put together another visualisation of the data where a good panda (orange) and bad panda (green) expanded as the positive and negative tweets came in:
We ended up winning the pusher prize, for the best use of pusher, and it was mainly due to the pandas - so, cute panda’s ftw!
You can view the code on github.
Other tidbits
Another tool worth mentioning, which I didn’t get to play with but looked interesting, was scraper wiki. It’s a platform to automate the scraping and storage of the data on the web. Once scraped you can do whatever you want with it - share/copy data/scripts, kind of like a github but for scraped content. Quite useful for scraping data like Olympics data where public APIs are rare to find.
Also other funky visualisation projects done during the hack day were:
- The gap in which medalists win by (came before the also awesome NYTimes 100m sprint video visualisation, worth mentioning seeing as we are on the Olympics)
- The data usage of the hack day (uses rickshaw, which is an abstaction for d3, which also looks cool if playing with d3)
- Tree map of olympic pictures, weighted by popularity
Aftermath
Overall, it was a really fun filled 2 days - got to hack around with more visualisation stuff, play around with the funky datasift and pusher services and met some really interesting people. Much thanks to new bamboo and the sponsors for holding a great event!
Also, Makoto (who did the gap visualisation) from new bamboo is doing a presentation about the visualisations of the hackday on 20th September for those interested. See you there if you go!
