How I Turned IPL Stats right into a Mesmerizing Bar Chart Race | by Tezan Sahu | Oct, 2024

In our fast-paced digital world, capturing and sustaining viewers consideration is more difficult than ever. That is the place animated visualizations shine. They will:

  1. Convey complicated tendencies over time in an simply digestible format
  2. Interact viewers emotionally, making knowledge extra memorable
  3. Encourage exploration and discovery inside datasets
  4. Simplify the communication of key insights to non-technical audiences

As knowledge professionals, it’s essential we keep abreast of those highly effective storytelling instruments. Let’s dive into how we are able to leverage them successfully.

As an avid cricket fanatic, I knew I wished to do one thing associated to the Indian Premier League (IPL). However I didn’t need to create simply one other run-of-the-mill visualization. No, I wished one thing that may make even essentially the most informal cricket fan sit up and take discover.

That’s when it hit me: what if I may present the variety of wins for every IPL crew over time? It will be like watching the whole historical past of the IPL unfold earlier than your eyes!

A fast search on Kaggle led me to a goldmine — a complete IPL dataset containing match outcomes from 2008 to 2024. I downloaded it sooner than Jasprit Bumrah’s yorker and saved it as ipl_matches_2008-2024.csv.

Now armed with my dataset, I confronted the daunting query: how on earth do I flip this into a kind of fancy animated charts?

Whereas I’m snug with coding visualizations from scratch utilizing Python, I used to be intrigued by the potential effectivity of low-code instruments. Enter Flourish — a device I stumbled upon that promised to assist create gorgeous visualizations with out coding — how cool is that!

Stumbled upon “Flourish” whereas trying to find a device to create the animated visualization

The vary of choices for visualisations supplied by Flourish is nice (even for free-tier utilization). On deciding on the “Bar chart race” possibility, adopted by clicking the “Information” toggle, I used to be shortly capable of perceive the information necessities for Flourish to generate a bar chart race visualization for us.

Understanding the information necessities in Flourish

After all, the uncooked IPL dataset was nowhere near this format, which implies I received the chance to leverage the facility of GitHub Copilot to therapeutic massage the information & carry it into the required format.

Right here’s the sequence of interactions I had with GitHub Copilot to assist me convert the uncooked IPL knowledge into the specified format (with a bunch of attention-grabbing IPL-related nuances):

As a primary step, I broadly defined the format that the dataset was initially in, and the way I wished the ultimate illustration:

Right here’s the consequence returned by GitHub Copilot:

I used to be pleasantly shocked to seek out that this piece of code was virtually right within the first go itself! The method proven is easy:

After extracting the distinctive dates of every match & the distinctive groups, initialize an information body with groups as rows & dates as columns. Now, iterate by every date & do the next:

  1. Filter matches as much as the present date
  2. Calculate the cumulative wins for every crew
  3. Replace the DataFrame with the cumulative wins

The one hiccup right here was this further piece of code — eradicating which, did the trick for me:

# Guarantee cumulative sum
if date != unique_dates[0]:
cumulative_wins.at[team, date] += cumulative_wins.at[team, unique_dates[unique_dates.index(date) - 1]]

cumulative_wins.head() resulted within the following:

However wait, there’s extra! The IPL, like all good drama, has its personal twists and turns…

Though this knowledge, by itself, is ample to be visualized in Flourish as a bar chart race, I made a decision to deal with a few of the nuances of IPL that can give the visualization a extra practical really feel.

Staff Renaming

All through the IPL historical past, there have been a number of events the place franchise house owners modified, resulting in the rebranding of the groups Bear in mind when Deccan Chargers remodeled into Sunrisers Hyderabad?

Within the dataset, these are thought-about separate groups in separate rows, the place submit renaming, the previous crew continues to stick with the cumulative variety of wins till that yr, whereas the brand new crew begins afresh with 0 wins.

To vary this, I attempted out the next prompts:

With a few minor fixes, that is what the ensuing code seemed like:

Now, to generalize this & apply it throughout the varied adjustments, I attempted changing his right into a perform & used Bing to determine the years of those main crew adjustments, earlier than making use of the perform to them:

Superior! I used to be capable of account for all of the franchise adjustments that occurred over time. Nonetheless, one factor bothered me…

Defunct Groups

A bunch of groups within the IPL appeared in simply a few editions & then pale away. Their presence within the ultimate visualisation after them being made defunct appeared pointless.

So, I attempted to have them eliminated after their ultimate look utilizing the next immediate:

This gave me one other neat perform, which I may apply to the groups that went defunct over time (once more, I discovered this knowledge from Bing).

Staff Logos

Within the demo knowledge in Flourish, I noticed that one column contained hyperlinks to photographs that may very well be used for every bar within the bar chart race.

To make my visualization come out, I wanted to do one thing comparable. So, I discovered the pictures for the logos for every of the distinctive groups in our dataset & added them to a brand new column:

This small contact considerably enhances the viewer’s potential to trace groups all through the animation

And now, I used to be all set to create the visualization!

With our knowledge primed and polished, it was time for the primary occasion!

Importing to Flourish was a bit of cake —it was routinely capable of determine the Label, Values & Picture columns appropriately.

Switching to the Preview toggle, I had one thing that nearly resembled what I had envisioned — a few setting adjustments right here & there, and we have been finished.

Following are the adjustments I made:

  • Used “Labels on bars (photos in axis)” because the “Labels mode” beneath Labels for a modern look
  • Set picture sizing to “Match” and form to “Rectangle” for crisp logos
  • Decreased the Dimension % of the Present Time Counter & Totalizer beneath Counter & Totalizer for stability

And there you will have it — from a easy CSV file to a dynamic, participating visualization that tells the story of IPL crew performances over time — with only a sprint of creativity and a sprinkle of information magic. 🎉

Right here’s the ultimate output👇🏼

Last Bar Chart Race visualization of IPL Staff wins over time (created by writer)

This straightforward-yet-engaging challenge holds a number of priceless insights for knowledge scientists and analysts trying to improve their storytelling toolkit:

  1. Low-Code Doesn’t Imply Low-High quality: Instruments like Flourish can produce subtle visualizations that rival custom-coded options.
  2. Information Prep Stays Vital: Our knowledge science abilities are invaluable in getting ready and structuring knowledge for efficient visualization.
  3. Effectivity Positive factors: For sure tasks, low-code instruments can considerably scale back time-to-insight with out sacrificing high quality.
  4. Accessibility: These instruments might help bridge the hole between knowledge groups and non-technical stakeholders, facilitating higher communication of insights.