Ten weeks ago I was introduced to D3.js in my data visualization class. I was blown away in the very first minute when the professor presented these examples. I had no idea the web was capable of such rich visualizations. The best part too is that D3 is not extremely hard to pick up. Granted some experience with javascript is necessary, but the visualizations shown in the examples aren’t nearly as difficult as they look.

What I made

London 2012

My very first visualization was a static one:

This visualization is a scatter plot of 2012 Olympic countries’ medal count vs their per capita income. The radius of the data points is proportionate to the number of people that country sent, and the pie chart is the break down of gold, silver and bronze medals.

This project was a hack. I had no idea how to use D3 and was just aiming to get something to work. Those pie charts are all carefully crafted path elements. This sort of thing is made easy by the D3 library and you should never ever see “M” “L” or “Z” in your D3 code when creating paths. I didn’t take advantage of D3′s capabilities and ended up creating long, hard-to-read path declarations. Here’s a snippet taken directly from my javascript file that should never be used:

 path = "M" + startPoint.x + " " + startPoint.y +
        " L" + (startPoint.x + radius) + " " + (startPoint.y) +
        " A" + radius + " " + radius + " 0 " + longArc + " 0 " + 
             endX + " " + endY +
        " Z"

In addition, you can even see on the yaxis that the label is vertical text facing the wrong direction. I was a sad man and couldn’t rotate the text the other way without it ending up somewhere way off the page. This poor fellow ran into my same problem, but had the sense to ask on stackoverflow.

Refugee Flows

For my next project, I decided to try making an interactive map. I found a bunch of data on this UN site about where refugees originate from and where they are seeking asylum. This seemed to be screaming for some sort of map visualization. So I made this:

http://refugeeflows.herokuapp.com/

This was a great exercise for my first interactive visualization. D3 makes it extremely easy to do mapping. All in all, the project took around 10 hours to complete and I learned loads more about SVG.

Student Surveys

I made this one with a partner. We chose to visualize a huge chunk of student survey data. The students were in 8th grade when the survey started and there was a second round conducted when the students were in 10th grade. Our main purpose for this visualization was to tell a story. We ended up deciding that parallel coordinates was the best way to communicate the information we found most intriguing.

http://studentsurveys.herokuapp.com/

Our visualization was built on top of one of parellel coordinate examples in the D3 gallery. This was great because we got to really understand a well made D3 example and then extend it to fit our needs. It also introduced me to brushing and linking, which is a great tool for visualizing huge datasets.

African refugee populations

After digging deeper into the UNHCR (United Nations High Commissioner for Refugees) database, I found even more interesting data albeit in a worse format. I found Data Wrangler an invaluable tool when formatting the data.

http://africanrefugees.herokuapp.com/

This particular visualization required loads of brushing and linking which was a lot of fun to do in D3. I used a very “object oriented” javascript approach with a world object that linked all of my separate visualizations with each other. I also got to play with the GoogleMaps API for the first time. This vis taught me just how hard it is to keep all the graphics within a page and make it still look clean.

Diabetes Visualization

For my final visualization, I worked with a partner again to visualize 4 years worth blood glucose levels, sampled every 5 minutes, from an actual diabetic patient. We worked closely with a clinician and a father of a diabetic patient to construct a useful representation of the data.

http://diabetesvis.herokuapp.com/

Once again, brushing and linking was essential for this visualization. By now, Reno, my partner, and I had become fluent enough in D3 to code most of what we envisioned; the hardest part of this project was making it responsive. We had almost 300,000 data points yet we needed our application to be snappy. Since our dataset wasn’t changing, we took advantage using lots of indexes on the database. Also during this endeavor, we learned how painful it is to work with dates. To mitigate some of the nastiness, we found a nice date library for rails called by_star. Also essential was this blog post about converting javascript dates to ruby dates. By the end of this project we were ready to start a petition to remove time zones from the world.