Deconstructing an animated sports chart

Basketball statistics

 

 
Sports is serious business. And like in any serious business, there are statistics, charts and figures. However, sports charts can also be plain fun, especially when customized with pictures and animation.  (Although, JavaScript animation is also serious business. I digress.)

Here is something out of the ordinary. It’s a chart built by Cullan Liang that sports custom graphics to represent each data point (in this case the players and the ball), with animation to bring to life changes in values for each player and the ball.

Using a charting library for this makes total sense: After all, 2D charting is about plotting data along an X & Y axis. Animation is about creating transitions between values.

 

The Playbook

In a true sports commentator fashion, let’s deconstruct this play.

There are three components to this chart: the analysis of historical shots, the data, and the motion code. We will skip a review the historical analysis here.  (Suffice to say, the scoring percent at every point in time was calculated based on each player’s shot history throughout their career.)

 

Data

In order for this to work, one had to study and write down the position and movement of each player as well as the ball (No wonder the entire game is not recreated here…). This then had be (en)coded into a JSON file which tracks each player’s position in the time domain.

Here is the structure of the JSON code:

  • The position for each player and the ball using x and y.
  • Score Percentage for each player.
  • Player’s name and team.
  • Player’s picture with its properties such as the link to the .png, the height and width.

Here is what it looks like:

, {
     "x":24.5155,"y":28.156,
     "scorepercent": ["50%"],
     "name": ["S.Curry"],
     "jersey": [" #30"],
     "team": ["GSW"],
     "marker": {
          "enabled": [true],
          "symbol": "url(http://stats.nba.com/media/players/230x185/201939.png)",
          "height": [40],
          "width": [50]
          }
},

 

The code (the easy part)

I suspect the easy part of this project was the animation. Simply add and configure the Highcharts motion plugin. Here is how that was done:

First, add the plugin library.

Then, a gameclock was configured for synchronizing the players, the ball and the player control.

var gameclock = [614.93, 614.89, 614.85, 614.81, 614.77, 614.73, 614.69, 614.65, 614.61, 614.57, 614.53, 614.49, 614.45, 614.41, 614.37, 614.33, 614.29, 614.25, 614.21, 614.17, 614.13, 614.09, 614.05, 614.01, 613.97, 613.93, 613.89, 613.85, 613.81, 613.77, 613.73, 613.69, 613.65, 613.61, 613.57, 613.53, 613.49, 613.45, 613.41, 613.37, 613.33, 613.28, 613.25, 613.21, 613.17, 613.13, 613.08, 613.05, 613.01, 612.96, 612.92, 612.88, 612.84, 612.8];

Finally, it all came to live with the “Motion configuration object”

motion: {

     enabled: true,
     updateInterval: 1,
     labels: gameclock,
     magnet: {
          round: 'floor',
          step: 0.08
}},

 

There you have it: A play-by-play motion chart. Game on! (Wait to let the data load)


 

Can you think of any other novel ways to use the motion plugin?