In this post, I want to take a little deeper look at d3, the javascript-based charting library from Mike Bostock of Protovis fame. For those who like to view information that is intuitively, accurately, and esthetically well presented, d3 offers a marvelous range of possibilities.
I previously spoke on Calendar Views, a supremely intuitive means of viewing information that can be measured at a dialy level; today I'll look at a host of other approaches that I find most compelling for their potential to work with the baseball data that is my focus. Each chart type will feature a screenshot from the d3 site, as I haven't applied any of these approaches to the baseball data just yet.
OK, time to look at a few more chart types, with my brief synopsis of each.
Streamgraphs are an esthetically pleasing way to show information that might typically be shared via an area chart. However, as with all the d3 charts, there is far more flexibility available to the chart creator, albeit with some added complexity. The results, IMHO, are worth the trouble, compared to the traditional lifeless output we see from Excel or worse yet, Powerpoint charts. I have created thousands of Excel charts, and employed most of the available tricks and hacks, but there are still significant limitations to what one can do; for Powerpoint, forget about it as a useful charting tool.
Here's an example from the d3 site:
Not quite what we're used to seeing from Excel, is it? While the eye candy aspect is pleasing, I refuse to use charts only on that basis. Lord knows there are plenty of charts out there that have instant eye catching appeal, but they are the equivalent of Britney Spears versus the John Coltranes or Mozarts one can create with d3. All fluff, no substance, and destined to be banished to the scrap heap with all the other inaccurate, data distorting charts that preceded them.
As for potential uses with baseball data, I envision some historical tracking of hits data (singles, doubles, triples, home runs) for starters, and will doubtlessly find other relevant examples to share in the future.
Another chart type I intend to use is the Scatterplot Matrix. While this chart type is certainly not exclusive to d3, the ability to thoroughly customize the output makes its use extra appealing. This chart type fits into the category known as "small multiples" coined by the legendary Edward Tufte, and provides the user with a considerable wealth of information in a limited space, while simultaneously making the information easy to grasp.
I haven't figured out how to use these with baseball stats just yet – certainly there could be a multitude of ways to do so. Perhaps looking at multiple offensive categories from a batter's career would be one application; the individual data points could represent specific seasons or age levels associated with each category.
In any event, the scatterplot matrix, as well as other types of small multiples, are exceptional at providing large volumes of information in a limited space, making it easy for the observer to detect patterns and relationships – and isn't that the goal of most data display?
The Sunburst is part of a category of relationship-oriented displays available in d3, with the commom goal of displaying relationships within a data set. In the case of the Sunburst, the data is presented in a more hierachical visual form (versus a treemap, for example), while providing immediate insights into the interrelationship between entities within the data.
Once again, the d3 esthetics are most impressive, but the key is that the underlying data is not distorted or mis-represented by the beautiful display. We are quickly able to see which sub-elements flow up to a primary element, as well as which of the larger categories dominate the data, and thus the display.
I am certain that this display could apply to many different baseball stats; my job is to find where it makes the most sense from a viewer's perspective.
Lastly, for this post, is the bullet chart, created by visualization guru Steven Few, and since added to a number of graphing toolkits and libraries. I have used these for several years within Excel, and was pleased to see their availability in d3, for they provide a compact, intuitive look at target-based data.
By target-based, I mean that we can set a target level – for example a .900 OPS, and see how specific players measure up to that goal. Bullet charts provide the ability to show the target, actual performance, and projected performance, all framed by relative performance levels (i.e.- poor, average, good, etc.). Here's the d3 example:
Many baseball applications exist for the bullet chart – we could create a pitcher dashboard showing how a single pitcher compares to his career and league averages across a variety of statistical categories – WHIP, ERA, SO/9, etc.
The same would apply for batters, where we could rate them versus their career numbers, league averages, and so on, using batting average, OPS, OBP, and any number of other stats.
Once again, we have the potential for a "small multiples" type of display, where all the information the viewer needs is provided in a single page or screen view.
Well, that's it for now, but I'm certain to blog on other chart types within d3, as there are many more. Give it a look for yourself, even if just to understand the possibilities – d3 examples.
by 
by
by 
