Visualizing Cricket

I recently discovered the game of cricket after moving to New Zealand (Go Blackcaps!), and set about exploring the game through a process of creating my own visualizations of the results of cricket matches. Consider these designs meditations on my new favorite sport.

Note: This is a work in progress, built for my own entertainment and education. I am only posting it online because a couple of fellow cricket enthusiasts I've shown it to have asked me to share it. It's buggy in spots, sometimes gets totals wrong, and has only ever been viewed up to this point by me in Google Chrome on a MacBook retina display. It may look quite crap on anything else. You've been warned.

The main chart I've been working on is a modified "Manhattan" graph, in that it's essentially a series of bars whose heights show the number of runs in each over. However, I've broken down each bar to show a distinct mark for each ball bowled. Dot balls (deliveries for no runs) display as, well, a dot. A single run is a circle the height of two dots. Balls for more than one run display as an oblong shape proportionally as high as the number of runs (3 runs are the height of 3 balls, 4 run 4 balls high, etc), accounting for a small amount of padding between each mark. The tiny padding makes a huge visual difference, allowing each mark to read as distinct, even at the end of a long game.

Cricket is all about the steady accumulation of runs, and I've tried to stay true to that by showing an individual mark for every ball in play, but still letting the overall shape of the game be read at a glance.

New Zealand's lopsided defeat of England

I've used the colours of each team to display batted runs. Extras that occur due to bowling faults (leg balls, wides, no balls, etc) are displayed in white, making them stand out at different visual value and making matches with wild bowling performances immediately stand out.

Wickets are in stop-sign red. I originally had wickets in full-height circles, same as a single run (the banner at the top of this page still shows the old design). I thought it looked awesome, but it bugged me that the vertical scale was off—an over with a hat-trick and three dot balls would have been the same height as a 3-run over—so now wickets have less visual prominence but the proper height for zero runs.

Behind the bars, I'm showing the current run rate as a yellow line. In the second innings, the first team's target rate shows as well. I've got some ideas about how to show the required run rate, so watch this space.

Using a bit of scripting, information about each ball call be viewed by pointing at it. we can highlight individual performances. This view immediately calls out an individual contribution, such as Chris Gayle's recent 216 run outing against Zimbabwe. On the Match pages, use the "Batting" and "Bowling" tabs on the right to select a player.

Chris Gayle's mammoth double century v. Zimbabwe

Below the overs chart, I've added a Head To Head chart, which shows the accumulation of runs between a given bowler and batsman. Bold red frames show wickets. Once again, every ball delivered makes a mark, and the size of the marks is proportional to the number of runs scored.

Tim Southee's 7-wicket evisceration of England's batters

Gayle & Samuels' ridiculous 372-run partnership

What's next?

I still have a long way to go, and there are many improvements I can make. Here are a few things I'd love to add:

• A free and open source of ball-by-ball info, so I can add commentary to each ball as well as a wagon wheel to show direction of play on the pitch. I'm pulling stats together from a few sources on the web, but I'm avoiding using any materials that aren't publicly available. In my own local version, for example, I'm inserting ESPNCricInfo commentary and displaying the last ball bowled, which is a great way to watch the game along with the radio. But it wouldn't be cool to repost their commentary here, so I've suppressed it.
• Because the dots have a size and shape, the bars don't start at "0"; a score of 0 runs in an over starts at the height of a "maiden", or 6 dots. I still struggle a bit with whether or not this matters.
• Accurate totals. Somewhere in translation, I'm losing a few runs. Shoddy programming on my part, but should be fixed.
• Run-outs aren't calculated properly, and always show as an out to the batter (as in Ross Taylor's run-out in Martin Guptill's record 237 innings against West Indies).
• I'm not showing caught vs bowled vs run-out wickets.
• Player totals in the head to head section (at least total runs for batsmen and wickets and runs for bowlers).
• The little highlighter panel on the right for bowlers and batsmen only works for the first innings and lacks totals.
• A summary for the front page that shows only totals per over and match results. It would be cool to see mini "heat maps" so matches can be compared.
• I have no idea what this looks like in other browsers, and imagine it's a mess on mobiles and tablets. This is totally fixable.
• These visualisations also work much better for limited-overs cricket than for Tests. I created this project mainly to help me watch 50-over one-day internationals, and it also works perfectly for Twenty20. It'll be interesting to see if the clarity that I get with 50 overs fitting on a screen translates to longer contests. I haven't attempted a Test yet, and I think there will be a lot of design challenges to solve.

Would love to hear what folks think about these. I'm @mlascarides on Twitter. Give a shout!

Press mentions:

New Zealand Herald, 23 March: Visualising Martin Guptill's record-breaking World Cup innings