Tag: d3

Pennant Race Charts Updated!

kc2519

The last of my big three annual updates is now complete, as all 2016 & 2017 pennant race charts have been created, and now reside in the Visual-Baseball Project portfolio. These charts are created using NVD3, which is built on top of the powerful d3.js framework developed by Mike Bostock. These tools help make the charts highly interactive, allowing you to see where each team stands at any given point in the season, and also providing the ability to zoom in using a smaller sub-chart beneath the primary display.

The structure of the charts is based on every team’s relationship to a .500 winning percentage – a situation where a team wins exactly as many games as it loses. This structure allows for easy interpretation of the results, as we can see which teams hover near the .500 mark (i.e.- consistent mediocrity), others that rise well above this level, and also those teams that descend far below the breakeven point. Allow me to illustrate these thoughts using the 2017 American League Central division, and my hometown Detroit Tigers, who suffered through their worst season since 2003.

2017_AL_Central

As you can see, the darker orange line representing the Tigers takes a steep dive starting in early August, culminating in a final record 34 games below the .500 percentage. Meanwhile, the rival Cleveland Indians (light blue line) present a near mirror image of the Tigers failure, with a sensational month of September that ultimately lands then 42 games over the .500 break-even level.

Similar charts have been created for the other divisions for both the 2016 & 2017 seasons. In fact, you can now view any season, league, and divisional splits dating back to the 1901 campaigns, a total of 380 pennant races to explore! Find all the pennant race charts here. Have fun exploring, and as always, thanks again for reading!

FacebooktwitterlinkedinrssFacebooktwitterlinkedinrssby feather
FacebooktwitterredditpinterestlinkedinmailFacebooktwitterredditpinterestlinkedinmailby feather

4 Years of Baseball Graphics Updates in 3 Days

kc2519

To say that some of my website visuals were not quite up to date is a massive understatement. The latest version of the Game Summaries covered the 2009 season. The interactive pennant race charts ran through 2011, and the Batting Explorer exhibits end with the 2009 season. Not exactly current in any of these cases, and other examples abound. So what to do about it?

For starters, the underlying data so generously made available from the Retrosheet folks needed to be updated. Portions of this had been done over the last few years, but a bit haphazardly, as I came to find out over the last few days. Some tables were current through 2011, others through 2012 or 2013. In short, they were consistently inconsistent, and certainly not suited to creating the latest versions of the aforementioned visuals.

One of the best aspects of growing older (at least from a data perspective) is accumulating more and more code that makes it a bit less painful to update or repair database tables. I have managed to create and save dozens of code snippets that help me create, insert, update, select, and otherwise manipulate the data into a proper format for consumption by visualization tools. In some cases, this code made the process surprisingly easy, while other cases required dusting off the cobwebs to understand what my code was doing or not doing. In the end, the process worked remarkably swiftly, aided by the periodic Michigan microbrew, resulting in table updates that allowed me to tackle the pennant race and game summary projects, resulting in 23 new baseball graphics created in a 72-hour window.

Et voila, as the French might say, the Visual-Baseball site now has 18 new pennant race charts (3 years times 6 divisions) while the game summaries have five new entries covering the 2010 through 2014 seasons, and they all work as expected. The pennant race charts are built using D3 and NVD3 code atop .json data, while the Game Summary exhibits are created using Simile Exhibit, a semantic browsing tool, also sitting on .json data.

The pennant race charts look like this:

pennants

The charts are interactive in several ways – individual teams can be hidden from view, the chart is zoomable, and individual values can be displayed using mouseover capability. You can find the entire portfolio of more than 360 charts here.

Game summary exhibits cover 60 seasons and afford users many filtering options to search for games based on specific criteria – teams, pitchers, runs scored, and so on. Results can be viewed in a tabbed fashion or via a timeline. Here’s an example image:

game_summary

The entire gallery is located here.

Have fun with both the pennant races and the game summaries, and make sure to check out a few of the other resources in the portfolio section. It feels as though the site is gradually becoming a unique resource for the visual interpretation of baseball data, whether it is in the form of conventional charts or more esoteric views such as the network graphs. Feel free to share any of the information on the site, and tell your friends and colleagues.

FacebooktwitterlinkedinrssFacebooktwitterlinkedinrssby feather
FacebooktwitterredditpinterestlinkedinmailFacebooktwitterredditpinterestlinkedinmailby feather

Mapping Projected Growth Rates with D3

kc2519

The mapping bug has bit me recently, as I continue to explore a variety of resources, including CartoDB, Mapbox, Leaflet, and now D3. While D3 is not a dedicated mapping platform like the others, it is perhaps the most flexible of all, due to the wealth of map projections provided by Mike Bostock, Jason Davies, and the rest of the D3 community. In addition, it provides nearly unlimited potential through the use of colors, labels, tooltips, and so on, all customizable using CSS.

My latest effort is a rather simple foray into a time-based map using population projections from the UN, found here. This map owes a debt of gratitude to a similar creation found on github from Rich Donohue. I was able to use his example as a starting point and then simply tweak a handful of settings, provide a different data source, and manipulate color schemes and the map projection. This is a basic choropleth map, where every country has a fill color based on the projected rate of population growth for every five-year period through 2100. I removed the data for the first half of each decade, as it didn’t add to the story. The result is a map that shows 10-year intervals for every country from 2020 through 2100.

Here’s a glimpse of the map, or click here to go to the full version:

This is a relatively simple example that barely scrapes the surface of what D3 can do, but it reinforces my love affair with open source tools and communities. More to come.

FacebooktwitterlinkedinrssFacebooktwitterlinkedinrssby feather
FacebooktwitterredditpinterestlinkedinmailFacebooktwitterredditpinterestlinkedinmailby feather