Making maps for the San Antonio Spurs

"When it comes to shot maps and data visualization for the Spurs–I’m proud of everything I make."

Tell me about your role as a Front-End Developer with the San Antonio Spurs. What does it have to do with maps?

Essentially a team’s operation’s staff houses the data on NBA players. It’s my job to convert the numbers that come out of models into data visualizations for the front office. Things like sparklines, bar charts, line graphs, etc. Mapping specifically comes into play for a specific type of visualization called a shot chart.

What is a shot chart?

Shot charts, or mapping the number of points attempted from locations on the court, were popularized by Kirk Goldsberry when he decided to use his mapping skills to determine who was the best shooter in the NBA. Goldsberry, who was a Harvard professor at the time, divided the court into “shooting cells,” looked at where they shot, and determined which players were able to average more than one point per attempt from the greatest number of places. Quickly teams realized they could discover other spatial insights, like where a player fouls most frequently, which side of the hoop rebounds are more frequently lost on, etc.

My charts involve slicing and dicing the data 100 different ways–home versus away, last ten games, first quarter versus last quarter by player to understand what they are good at. This is important to the front office because they are in charge of acquiring and drafting players. It’s important to coaches because they can use it to understand how to develop players.

How did you get started in mapping and data visualization?

I was tracking human rights abuses in Burma (Myanmar) and using Illustrator to create reports. We would track the locations of things like patients we would treat, where our teams were going, human rights abuse locations, etc. While there I met someone who had gotten their GIS Masters online at Penn State. That sounded pretty cool, and a logical extension of both what I was already doing and my general love of maps. Also, I could do it remotely, so I signed up. Then I got more into interactive web mapping and doing more front-end development with Javascript.

You have a background in cartography and GIS–how did you end up doing data visualization for the San Antonio Spurs?

Shot charts are just the analysis of spatial patterns–something GIS analysts know how to do. I was working at Axis Maps with Andy Woodroof, and he introduced me to Kirk Goldsberry. Once I knew jobs like this existed, I became really interested in applying. In 2013, a company called Second Spectrum put video cameras in every NBA arena to track the location of the ball and every player’s location 40 times per second. I found a public data dump of one year of this information and created a couple of data visualizations based on it–specifically visualizing spatial patterns.

Kirk had recently joined the Spurs as Vice President of Strategic Research and was hiring a front-end developer so I applied. The visualization I had created was proof of my front-end and subject matter competency and I was able to get the job.

Would you say it was a love of the subject matter (basketball) or your desire to expand your analytical skills that drove you to apply?

The subject matter–I’ve always been a huge basketball fan. It was the opportunity to apply my skills to this particular subject matter that drove the decision.

What is one map you’re most proud of?

When it comes to shot maps and data visualization for the Spurs–I’m proud of everything I make. I get to watch basketball and create visualizations every day. I’m good at it, I love doing it. Every time I put a visual out, and a bunch of the front office share their appreciation for the work, I feel great. But just because it’s insightful, doesn’t change the fact that it is one of several pieces of context that go into a decision about, say, recruiting a player. Without having a direct line to impact, it makes it difficult to choose a single visualization that has made the most difference.

I’m still pretty proud of a map I made at Axis Maps. Among other things, Axis Maps makes typographic maps, and I made one for LA and the South Bay Area using OpenStreetMap. Everywhere there is a line, you type out the road name. You use color to distinguish highways from streets from water. I wanted to put my own flair on this and since I was working on a map of LA, I decided to add the wingdings surfer dude to the Pacific ocean text. If you look closely, you can see him surfing the ever amazing California waves.

Joshua's wingdings surfer dude "flair" on his LA typographic map.

I’m still pretty proud of a map I made at Axis Maps. Everywhere there is a line, you type out the road name. You use color to distinguish highways from streets from water. I wanted to put my own flair on this and since I was working on a map of LA.

Bio

Josh Ryan is a Senior Front-End Developer for the San Antonio Spurs. He attended Wheaton College (IL) for Mathematics and obtained his Masters in Geographic Information Systems from Penn State. Josh has worked for Earth Mission, the Free Burma Rangers, and Axis Maps. He is a current editor of the Atlas of Design, a project of the North American Cartographic Information Society (NACIS).