On top of Roger Federer winning his 15th major title at 2009 Wimbledon, I wanted to explore the front-running champions who have walked before him. As a result, I’ve put together an visualization of these champions over time.

I should note that in doing my preparation for this infographic, I decided to extend far beyond the start of the “open era” (1968) entirely for the amount of data. A post-1968 graph would give me much less to work with.

Otherwise I feel I should pay respect to the accomplishments of Rod Laver and Bjorn Borg: both of these men had utterly remarkable runs (both earning 11 titles in less than a decade), but neither becoming the true front-runner within the constraints of this graph.

I hope you enjoy! If you find this interesting, also be sure to check out this comparison of Federer and Sampras in their race to 14 titles. Meanwhile, here’s to Federer’s hard work… let’s see how far he can take it.

In May 2009 I ran a 5.8 mile leg as part of a relay team in the Frederick Marathon. This graph shows the training progress in the weeks leading up to the race (including the unexpected slowdown during weeks 6-8).

I plan on using a similar technique to track my training in preparation for the Army 10 Miler in October, 2009. In that case, I plan on recording the time of each run as well, which will surely bump up the possibilities in how to present the graph.

With Roger Federer’s recent win of the 2009 French Open, he is now tied with Pete Sampras for holding the most Grand Slam titles — fourteen.  Although the two athletes have arrived at the same destination, how do their respective journeys compare with one another?  With this question fueling my curiosity, I set out to create a rich visualization of the data to add some depth to this story.

The final product is available as follows.  For additional notes about the techniques used to create these graphs, keep on reading.

Here are some tips & techniques I employed to put this together.

Have Your Data Ready

Before diving into Illustrator (or whatever your tool of choice may be), spend the necessary time finding all of the data you will need for your graph.  Go the extra mile to arrange and label everything properly — you may return to the data at a much later time and will be glad you did yourself the favor.  Aside from reaping the benefits of good organization, this step is additionally helpful in keeping the grunt work of data-fetching separate from the creative requirements of the task.

Start with the Simplest Graph Possible

An elegant, attractive graph is seldom created from scratch.  There are usually a number of tried & tested variations that must be wrestled with before arriving at the final product.  With this in mind, a good first step is creating some bare-bones, stripped down graphs to get bird’s eye view of the data.  This phase is all about finding the approach that will best server your original vision.  Sketches work great in this stage.

What is the story you want to tell with your data?  This is an important question to keep in mind, as different visualization approaches will yield different results.  Play around with things.  See what looks good as well as which data comparisons are intuitive and interesting.  Seek feedback from friends or colleagues who might offer a valuable opinion.

Using the Grid

Before long, it will be time to create your final, finished product.  At this stage, the very most important thing you can do to keep things looking straight and orderly is use Illustrator’s grid feature.  You’ll want to make grids visible (CTRL/CMD + “), as well as enable “Snap to Grid” (CTRL/CMD + SHIFT + “).  Additionally, you may want to go into Illustrator’s preferences to customize the grid spacing and subdivision width (which you can modify at any point).

Another useful tip to keep in mind when using grids extensively is enabling Overprint Preview (CTRL/CMD + ALT + SHIFT + Y).  This will have the gridlines appear on top of all objects & paths, allowing you to eliminate any guessing that might otherwise be required in keeping things properly arranged.

Using Layers Wisely

Keeping your objects arranged in layers is a huge time-saver when dealing with moderately complex projects in Illustrator.  This was especially true in my case of creating four separate graphs, each of which contained separate groups of objects.  For example: if I wanted to modify the color of the Roger Federer graph plots, I’d only need to target the layer “Federer” and all plots (on each graph) would become active.

Layers can also be locked, combined, or temporarily hidden to make document management easier.

Go Forth and Visualize

And that’s it!  Combined with a simple bit of color and typography, you can transform any crude visualization into an attractive graph.  Keep in mind that data in itself can be rather inert; though when arranged in a conscientious manner it can tell an interesting story.  Hopefully the techniques above can be of use in recreating your own graphs of a similar nature.

While on a recent plane ride, I embarked on a self-imposed quickfire challenge to use Adobe Illustrator to design the text “@davidpots” (my Twitter username) in the style of the Washington Capitals logo.  I was armed with only 45 minutes and a vector version of the Capitals logo; no internet connection would be at hand for additional assets (such as fonts, etc).

By the end of the plane ride, things worked out great:

Throughout the remainder of the post, I’d like to share an overview of the approach I took and the Illustrator techniques used to make this happen.  The result is not merely a tutorial, but rather a broad look at some Illustrator skills any user might find helpful in such a situation. Continue reading »

If you are anything like me, you probably experienced quite a few instances of sports bewilderment while watching the Beijing Olympics over the last few weeks.  Dozens of sports were showcased, many of which are entirely foreign to the average viewer.  As a result, I’d wager the following questions were pondered by millions:

• “What’s the name of this sport, again?”
• “How exactly do the rules/scoring work?”
• “Is this a qualifying heat, or the final race?”
• “Which team would the winner of this match go on to play?”
• “Which star players on the court/field should I be keeping an eye on?”
• “What other related events will this athlete be competing in?”

While a viewer could answer any of these questions by visiting websites like NBCOlympics.com or Wikipedia, this equates to lousy user experience.  Most viewers aren’t going to want to get off the couch.  Even those armed with a laptop have to take their eyes off the TV, pull up a browser, and wade through the website to find their obscure answer.  Ugh.

But there’s good news!  I would wager that by the 2012 Olympic games, viewers will be able to find answers to all of the questions above (and more) simply by using their TV’s remote control.  How?  By using TV widgets. Continue reading »

In my recent work for Professional Baseball Training I had the task of designing a logo. This was a challenge that excited me from the outset, as it brought to mind the countless hours I used to spend as a child sketching the logos of my favorite sports teams. It was with these fond memories in mind that I looked back at the evolution of sports logos of recent decades, taking careful note of how things have changed over time.

It did not take much searching before I stumbled upon Chris Creamer’s SportsLogos.net, a “virtual museum” dedicated to sports logos & uniforms. This site has been invaluable for my research needs, as it provides quite the in-dept historical record for all teams in every sporting league you can imagine. In this post I would like to share some of my findings.

Continue reading »