Starting over with d3… and then not

Recently, I decided that I was going to restart my education on d3.  In the past couple years, I’ve made a few attempts to become proficient at it, but the same pattern would play out every time.  I’d learn a little bit, get excited about the possibility of developing a particular chart, and then abandon my structured reading to just start hacking away.  The result was always the same: an unfinished project, shattered dreams, and only a shallow understanding of d3.

So I decided to do it differently this time.  I went back to the beginning, to Mike Bostock’s tutorials.  I buckled down and really, really worked through “Let’s Make a Bar Chart”, parts 1, 2, and 3.  I went slowly, digesting, drawing, understanding.  It was great.  I felt great.  I looked forward to continuing that process.

But then the Masters Tournament happened.  Jordan Spieth crushed the competition, and tied the 1997 version of Tiger Woods for the best final score at the tournament.  A lot of people talked and wrote about how the two victories compared, pointing out that Tiger beat “the field” by a greater margin than Spieth.  It made sense, but I kept thinking it would be cool to see that difference, to chart it.  But no, I was going to stay strong, I was going to patiently learn, not hack.  This time, I was going to build the foundation before the house.

Sigh… No I wasn’t.  I started hacking.

Tiger vs Jordan See the full chart with interactivity (barely).


Well, I’ll try to make the most of it.

Next Step (learnin’-wise)

This particular chart is actually two Wilkinson dot plots, one of my favorite of the dot plots.  From a programming perspective, it was a little tricky for me, because I had to know how many steps to move each dot over from the axis.  For instance, if a particular player had a score of -13, but 2 golfers had already been charted with a score of -13, the new player had to move over 3 “steps”.  I solved the problem pretty primitively: I maintained a counter.  As players of a particular score were processed, the counter would get bumped, and each player would be “moved over” as many times as the counter specified.  When the score changed, the counter would be reset to 0.  This implementation required that the list of players was sorted by score.

While this method worked, I’m guessing there’s a much more elegant way to do it.  When my development was near to the end, I discovered this: d3.nest.  I’m pretty sure that I could use this to group all the players by common score.  Then, if I could process each group separately, so that each group had its own index, that would be… great?  Anyway, I need to learn about d3.nest, plus everything else on this page:


Next Step (development-wise)

If I do figure out d3.nest, I’d like to rewrite this chart using that method.  Hopefully I could make it more reusable, so that I could be pumping out Wilkinsons all over the place.  At a minimum, that’s what I’d like to do.

Specifically, though, I think that this is actually a pretty nice way of looking at golf scores.  You can see the overall distribution of a particular tournament, and if you show multiple years at the same time, I think you could really get a sense of which years were “runaway wins” and which years were highly competitive.  Another set of years may tell you when the course at Augusta “played tougher”, and when it was easier (like 2015 was).  And let’s say I wanted to answer a question like, “How has Phil Mickelson fared at the Masters lately?”  I could look at the charts for the last 5 years, and then highlight the dots for Phil Mickelson. 

So let’s say I had all kinds of time.  I’d load all the Masters data, across all years, into one file (not really that much data).  I’d make the code more flexible, so that it could display a variable number of years, all in a row, left to right.  I’d add some sort of multi-selection control to the interface to let the user pick multiple years.  And finally, I’d add a search textbox for the user.  If they enter a golfer’s name, all the dots representing that player (across all shown years) would highlight.  I think that’d be pretty sweet.  If I had all kinds of time.  Maybe someone else could build it for me?


Other Projects I Ripped Off

As I came close to finishing this chart, I realized that it closely resembled a favorite chart of mine: Jane Pong’sVisualizing the Hong Kong Marathon Results”.  That’s a pretty gorgeous chart, and so effective.  I swear, though, that I had picked my blue/orange color scheme before revisiting that chart.  Very weird.


Anyway, we’ll see where this goes.  I hope to have something else to show soon.