D3 Scatterplot Retrospective


The D3 scatterplot project is a scatterplot of professional bicyclists and their time up a particular mountain during the Tour d' France and their overall ranking and points out any accusations of their use of performance enhancing drugs.

One cool thing I did here was conditionally color each circle based on whether that ride has been accused of using performance enhancing drugs. Those riders in red have been accused or found guilty of drug use while those in green have never been accused of nor proven to have used drugs. One thing about these D3 projects that I am very happy with is that I did not import all of jQuery just so I could use $.getJSON(). In all of these projects, I used only standard xhr requests.

Once again, I relied upon Scott Murray's D3 tutorial to help me get this project running decently.

Code Review

In this project, D3 started to make some more sense. I still relied heavily upon tutorials and walkthroughs to help me get things sorted in my head.

Specifically, my axes and scales look much better in this scatterplot than they did in the bar chart. I also figured out how to do a rudimentary hover tooltip that looks a little bit better than the default HTML <title> tag.

One struggle I had with the scatterplot was that I had to preemptively massage the data to fit my needs. The dataset provided each rider's fastest time up the mountain, but in order to put the riders in order I needed their number of seconds behind the best time. So I added a key value pair to the original object of each rider's finish time minus the finish time of the leader.

Future Improvements

This project was the first one I completed for a friendly month-long, "speed run". That meant that I didn't add any frills. It could use a little sprucing up with some CSS or maybe a background image of some bicycles or something since this is related to bicycling.