Innovation Session: Cribbage Board

The last few Tuesday nights I’ve been working on a visualization about the history of the NFL. This week, however, I don’t feel like fidgeting with javascript, so I’m going to do something different and work with my hands.

Innovations Sessions are at their heart about solving problems. Tonight’s problem is that I don’t own a cribbage board. I could certainly buy one, but the pop-out, machine-painted boards don’t seem up to the caliber of my tastes. A cribbage board reflects a lot about a person and so to adequately represent myself, I need to make mine by hand.

If you’re not familiar with cribbage, take a second to read up on it.


Before I start anything I look for inspiration. I found a lot on etsy and was also impressed by this wood burned piece. Being a surfer I also checked for any surfboard flavored pieces and found these two.

I decided my design would have to incorporate a surfing theme and a bit of wood burning for style. The only restrictions are that I have either two or three tracks of either 60 or 120 holes, one hole at the end to win the game, and a few to store pegs at the start.

Here are some of my rough sketches.



I decided to go with the surfboard shape because of the symmetry and low profile. If I do a 60 hole course I think I’ll be able to put an image in the center as well.

Here is the cutout and me beginning to put in the hole placement.



As I cut it out I remembered why I don’t like shaping symmetrical boards; I’m not very good at it. I can’t replicate a curve in either direction, my left side curves always do what I want and the right side ones are too wide at the top. The board has a nice big gash in it from where I messed up the first curve, I guess that will add some character.


Drilling Holes

To make sure there is a bit of consistency in the peg hole depth I hacked my drill bit and marked it with a bit of duct tape.

After drilling the first set, I wanted to make sure everything fit. I probably should have started by drilling a set into some scrap wood to make sure my spacing was good. Note to self for next time, but thankfully my eyeball was pretty good.



I only drilled three sets tonight. I forget that I can’t use power tools in my apartment late at night without disturbing neighbors. I guess that is why I usually do these types of things on weekends. The holes are fairly rough around the edges. Probably a combination of the soft wood and a small hole size – they are also clearly hand drilled. Looking at some of the other examples the placement looks a lot more uniform. This is probably another good reason to do a practice set.

I’ll finish the rest up tomorrow, but I did get a chance to do some wood burning. (Also probably something I shouldn’t do in my apartment late at night.)



This is Ocean Beach, the place I frequent in the winters up here.

I’ll post a few more pictures when I finish drilling the holes and stain the wood.

The only other thing I might do is drill a big hole through the back to hang it from. I might even drill a few sets of holes on the top to store pegs in while it is hanging.


Here is the final pic. I added a 7×3 grid at the top to keep score – I figure that would come in handy when playing multiple games in a row. I also added the hole to hang it from and one more peg spot above the 60 for pegging-out. I then sealed it with a light coat of mineral oil to protect it from water damage and warping.

You’ll notice some of my holes are better than others, doing that part by hand was definitely error prone.


Innovation Session: The History of NFL Win Percentages – Part 2

I’m going to pick up where I left off two weeks ago working on my chart of NFL team win percentages over time.

Last week I focused on getting the infrastructure setup, which was much easier than I thought, and walking through a basic tutorial to get a line graph working in D3. This week I’m going to do some customization.

Wins, Losses & Ties

To get the chart working last week I simply calculated the win percentage for the Falcons for a few seasons and plugged this in. Realistically that isn’t scalable, I’ll want to be able to input data in the form of a W-L-T season record and have it render.

To calculate a win % I will count each win as 1 point, loss as 0 points and tie as .5 points. I’ll then divide the sum by the total number of games to get a %.

When it comes to getting data quickly, wikipedia rocks. There is a page with all of the Falcon’s season data in a nice table format. I used it to create a new table with team, season, wins, losses & ties as my columns.

For the team value I’m using a single word key that I’ll be able to reference as I develop to link elements. For example, I will likely create a key to hex color reference dictionary so every team appears in their official color.

So now I have the history of the Atlanta Falcons.

nfl standings all seasons

Adding A Rival

One of the best parts about current NFC South is the historical parity. More so than any other division, we’ve all had our time on top and on bottom. Lately though, the Falcons and Saints have been fighting for the top spot. Last year we were 1:1 and the games were intense. This year we’re starting off the season with another battle.

Adding a second line the way I have planned is my first big roadblock. Most of the tutorials I’m seeing are suggesting adding a new column to add a new line. I’m not sure this will work for me because  I have already defined my charted value based on a calculation of three columns. If I added three more columns for every team I’d end up with 96 columns and a lot of code to parse them. I’d prefer to just add more rows that can use the code I just wrote and instead use the name column to distinguish the sets.

Unfortunately, javascript data manipulation isn’t my strong suite. After a number of failed attempts I finally got something sort of working. For now, both teams are on the chart but the code certainly isn’t clean. I basically created filters for each team and have two functions for plotting, each dependent on one of the filters. Feel free to take a look at the code an let me know if you have any tips: Greg Kroleski Github.

I want to build my keys dynamically from the csv team column and loop over each one creating a new line. I would also like to pull in the colors while doing this. Hopefully I can get there next week – but for now – here is where I ended up.

nfl standings falcons v saints

 Or, for the next week you can check it out live on my NFL Standings page.

Innovation Session: The History of NFL Win Percentages

Tonight I’m going to start working on an idea I had for an interactive chart of NFL win percentages. The idea came to me when thinking about the Detroit Lions and how bad they are. I wondered if they had always been this bad or if it was only recently. (Hint: Always) So I thought it would be cool if I could look and see every team’s win percentage for each NFL season going back in time.

This would be something easy to do in Excel or a static charting library, but I’m going to use it as an excuse to play with/learn an interactive data visualization library called D3.js. This is the javascript library that drives many of the webs coolest visualizations, like this New York times feature on NBA shot percentages.

I’ll have to get it working first, but once I do I’ll be able to add interaction and highlighting to make it easier to spot trends. I’m really excited about this… but that is because I haven’t started writing any javascript yet, once I do I’m sure my tone will turn more to frustration, it usually does when javascript is involved.

Here is a 30 second sketch of what I am thinking. Lots of lines, the ability to make one stand out and some sort of grouping of teams so it is easy to turn them on and off.


Getting Started

I going to start with the javascript and worry about data later. That is the easy part. Code will be posted on my github.

This is my first project running D3 from my server and also my first time developing on a local web server and then pushing the code to my regular server through github so I’m bracing for the unexpected.

A few minutes later… that was actually pretty easy. The nice part of developing an interactive visualization like this and pushing commits each time I get it working is that I can rewind if I ever need to.

Tonight I walked through a tutorial to get a basic line chart working in D3. The data is all loaded from a separate file which is the main goal. As I update the data in that file, the chart will update. I might explore loading data from an sports data API at some point, but for now this seems like one less level of complexity. As of tonight, what I’ve finished looks like this.

Screen Shot 2013-06-05 at 11.57.04 PM

It is the last 12 season of the Atlanta Falcons. I figured that was a good place to start.

If you visit this page in the next week or so, you’ll be able to see something that looks like that live (assuming nothing breaks). If you wait longer then a week though it might look different. Because this graphic is D3, it is rendered live when you visit the URL. S0, once I start working on it again, the version you will see at that link will be the most up to date one and it might be very different.