Cricketing Heat Map




Heat maps are pretty versatile. They have been used for everything ranging from charting home prices to changes in the stock market.

heat-map-avg-listing-home-price-trulia
(Average Listing Price for US states, week ending Feb 17, 2010. Source : www.trulia.com)

heat-map-snp-500-finviz
(SNP performance, Feb 19, 2010. Source : www.finviz.com/map.ashx)

Inspired by the last ball win over the South Africans yesterday night, I wondered if some of that action could be captured in a graph. One of the interesting approaches that came to mind was a heat map. But before we go further, here’s how a normal scorecard would look like at the end of the match.

scorecard_small
(Click on image to open the full scorecard)

As you can see, this is clear and concise and probably the best thing to use if one were interested in knowing who scored how much and how well the bowlers bowled. But this does not give you quite the feel of how the match went ball by ball. While it does tell you that the match went down to the wire, it does let the user form an idea of what caused it to go went that way.

jacques-kallis-sweeps

So here’s what a cricketing heat map would look like.

cricketing-heat-map
(This is not a reproduction of the match mentioned above)

For how this was done:

Tabulate the Match Data

cricket-match-data

Data above all else !!! So here goes the data into a spreadsheet.

Creating the Data Table

Read the data from the tabulation sheet and lay out the grid on which the heatmap can be superimposed. We would need to use a few excel formulas out here.

heat-map-conditional-formatting

Using Conditional Formatting for Creating a Heat Map

While conditional formatting was limited to 3 conditions in Excel 2003 & earlier, Excel 2007 onwards that got changed. So we can have separate color coding for each category on run scored (0 to 6).

conditonal-formatting-to-create-heatmap

Once we have these steps done, we would need to resize the rows, extend the conditional formatting to all the cells and add a color legend.


Excel Formula, Excel Chart, Excel Macro, Excel VBA, Pivot Table Excel, Excel Dashboard

What Do You Think ?


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Comments and Trackbacks

  1. Gerald Higgins wrote:

    Let me say first of all, I’m not really a big cricket fan, and don’t know a great deal about it.
    From a batting perspective, I think this is a fantastic visualisation. I don’t know if any major newspapers already do anything like this (the one I normally read certainly doesn’t) but if I were a sports editor, I would give serious consideration to making this chart a regular feature of the cricket page.
    There’s a lot of white space on the chart. You could think about filling some of this with carefully selected data. For example, rather than having the batsmen’s names and runs along the top, you could have this in vertical text at the bottom or top of each heat map column, perhaps also with a code letter for how they were dismissed.
    One question – if a batsman was out for a duck, how would that appear on the chart ?
    From a bowling perspective, I don’t think it’s quite as successful, but it could be improved fairly easily. For a start, more than half the team didn’t bowl at all, so you could cut the space required immediately.
    Also, there are some key bowling stats that aren’t reported, or aren’t easy to see. For example, fall of wickets can be seen (or at least estimated) in the batting chart, but it is invisible in the bowling chart. Also, maiden overs (overs where no run is scored) are not immediately obvious. Maiden overs and wickets could be flagged with some small colour coded symbols.

    I wonder if there’s any way of combining the charts, so you can see, for every single ball, who was bowling, who was batting, and what the score was ?

    Anyway, great idea, well done.

  2. Gerald Higgins wrote:

    I had a couple of other thoughts.
    1) I’m not clear how balls where no run is scored, are shown. I’m guessing they are very light grey.
    In my opinion, this is one of those situations where the difference between 0 and 1 is more than the difference between 1 and 2. So I would suggest highlighting 0 score balls a little differently. For example, somehow making the bar only half the normal horizontal length, or maybe even less, might be one way.
    2) How are byes shown ? For non-cricket fans, these are the additional runs awarded for certain things, without the batsman having to score them, such as the bowler bowling the ball wide.

  3. Gerald Higgins wrote:

    Had another thought – add a line for each hour, and some system of broader lines for the lunch breaks / overnight breaks etc.

  4. Ajay wrote:

    Some very interesting thoughts there. Some of the challenges in this visualization stem from the fact that each chart spans across 300+ rows compressed to 1px height. That makes is virtually impossible to color code single point information effectively such as 6 runs being scored on one call and 1 on the other. Since they are bunched up so closely together, even the highest color gradient difference does not being out the difference. I did struggle with that for a while and than my feeble intellect gave up :-)

    I too wondered if there was a single holistic’ visualization that could cover up the entire match. The original chart did have a good deal of additional information as tables that I cut out since I wanted to focus on the ‘visual’. (By the way you did guess it right – a zero run bowl is a light Grey)

    Regards,

  5. Gerald Higgins wrote:

    OK I understand.
    What about doing away with colour coding for the scores, and use the REPT() function with some symbol, to make the bars be different widths.
    For example, using the Webdings font, you could use “g” which returns a solid box, and “c” which returns an empty box.
    So, for an over with these scores on each ball
    0, 1, 0, 6, 2, 0
    you could show
    c
    g
    c
    gggggg
    gg
    c

Subscribe

Keep up with the latest stories - Delivered right to your inbox
feedburner

Translate

English flagChinese (Simplified) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagDutch flagHindi flagPolish flagSwedish flagFilipino flagHebrew flagIndonesian flagUkrainian flagThai flagTurkish flag
treeemap software for excel