New Bamboo Web Development

Bamboo blog. Our thoughts on web technology.

The Joy of d3.js

by Makoto Inoue

Happy New Year!!

If you are thinking about learning something new in the New Year, how about learning d3.js?

Since organising the Londinium MMXII Hackathon (Video) last year, I have become a big fan of d3.js for data visualisation.

Last year, I organised a few drinkups and meetups, and am now excited to announce my video tutorials called "The Joy of d3.js", a commit-by-commit guide to building Hans Rosling's "GapMinder" data visualisation in d3.js

Who is Hans Rosling?

[Dr. Hans Rosling: Drawn by @makoto_inoue (Me!!)]

Hans Rosling is something of an idol in the statistics and data visualisation world. He gave a TED talk and also presented in the BBC program called "The Joy of Stats" (hence the name).

GapMinder and d3.js

During his keynote at the Open Knowledge Festival 2012, Hans Rosling spoke of his regard for d3.js and its author Mike Bostock, saying

The bubble chart that took my son one and half year, this one, to do,
you can do in this evening now, which is this one, the one Mike Bostock made.

That's probably true for someone like Mike Bostock, who knows the library inside out.

Mike actually created this very beautiful and interactive visualisation.

I looked into the source code, it is packed with interesting techniques, although some of them are a bit too advanced for beginners.

So I created a subset of his visualisation as a series of screencast on "Benkyo Player".

Benkyo Player

Benkyo Player is a video caption search and notes sharing app which @olivernn and I have been building as a personal project ("Benkyo" means "Study" in Japanese).

You can search the captions (black bars), mark the moment you want to revise (orange circles), and leave comments (red circles) from the video page.
I will try my best to answer them all if you leave questions and suggestions on the video pages.

You can also search captions across multiple videos in the same course.

(If you are interested in how all the search works, the cross course search is implemented with PostgreSQL full text search, while the real time search in each video page is implemented with lunr.js, built by @olivernn

The site is super alpha, so may have some bugs (Please let me know if you find one). As a fallback, there is also a youtube play ilst.

The example code is all hosted on github, so you can actually clone the samples and play with it.

I am still learning d3.js, and would like to "benkyo" together!!