Here is a first, albeit limited, look at my capstone, Hoop Helix. The basic idea behind Hoop Helix is quite simple: take individual National Basketball Association player stats and visualize them in a unique way that helps suggest a more team oriented understanding of their actions.
In the screenshot above, I have Los Angeles Clipper’s point guard Chris Paul’s top five passing targets and top five passers – that is, the teammates who pass to him the most – to this point in the season. Although not pictured here, there is an accompanying breakdown of assists as well. In the network representation, Paul is the central node and the top five teammates are the outer nodes. Node size reflects the total number of passes made by Paul (on the left) and received by Paul (on the right) according to teammate. These numbers are visible when a user hovers over each node. Right now, the edges (the lines that connect the nodes) aren’t representative of a value, but that will likely change in the future.
So who cares? Well, if I were an opposing team I would make note of the attention that Paul and Blake Griffin pay to each other. They pass to each other quite a bit. Perhaps disrupting that interaction could cause a significant disruption to the Clippers success? As a fan, I simply like seeing the interaction between teammates.
I’ll provide more writing about how I built this in future posts, but for now I’ll just say what I used to create the network graphs. In my ideal world, I would learn D3js or Processing (or both! why not?) to create the visualizations. In my practical world, that isn’t feasible right now so I went looking for an alternative. I found vis.js, a visualization library that includes a network. After more looking around, I found a Ruby Gem, vis-rails.
I’m not exactly sure what type of data I’ll look at besides assists and passes, but that’s all part of what I’m still figuring out. There is quite a lot of data available at NBA.com and combing through it is a research project all on it’s own.