How to Create Animated Stacked Triangle Charts Without Code

A version of this article originally appeared on the author’s blog.

What’s a stacked triangle chart?

This chart type is good for displaying the order in which teams score in various sports. I will explore two options for creating stacked triangles charts: first without code and then with code.

See more examples here:
Animated Sport Results
FIFA World Cup 2022

If you want to showcase your favorite team’s match results these options will help you create the animated recap of the match.

Option 1: Without Coding

Creating a stacked triangle chart without coding is now possible with an editable version available on PlotParade. This small chart creator tool allows you to copy and paste your match results, customize the chart, and export it as a GIF animation. Here’s how you can do it:

1. Edit the dataset:

You need to know only the score progress of the match. You can obtain this information from websites that provide match summaries like
• Olympedia
• The official websites of international associations for various sport disciplines (FIFA, IHF, IIHF etc.)
• Sometimes sport betting sites have great progress data
• Good soccer data can also be found on Wikipedia

To use the data from this water polo event I copied the results column into a table and pasted the scores into the dataset editor:

And after clicking on the save button, you’ll see the animated recap:

2. Customize the Details:

Additionally, you have the option to change the color palette and adjust the animation speed, although be mindful that a slower speed may result in larger file sizes when exporting.

You should also edit the title, subtitle, and the data source before exporting the animation.

Additional Features:

To improve the output file, the exported GIF also starts with the very last frame that’s visible for only 100 ms. This ensures that when shared online, viewers won’t see an empty starting image but the final look of the chart.

The last frame remains on display for 3 seconds before the animation loop begins again, allowing enough time to observe the results.

Handling Text Length:

If you wish to use longer country names or even athlete names instead of 3-letter codes, you can do so, as the chart accommodates varying text lengths. The layout has been adjusted to prevent text overlap with the score and maintain readability.

Advantages of using stacked triangles on plotparade:

• No coding skills required
• Ability to export the animation into a GIF file
• Ability to adjust animation speed through the user interface

Disadvantages:

• Limited number of color palettes
• The current version does not cover visualizing penalty scores, gaps for halves/periods/quarters/overtime, and simultaneous point scoring between opponents (e.g., fencing)

Option 2: Download a Sample d3.js File

For those who prefer more control and flexibility, you can choose to download a sample d3.js file. This option provides greater customization options but it is a bit more technical. Here’s what you need to do:

Access the File:

Visit my GitHub repository and download the triangle_stacks.html file, which contains the visualization.

Edit the Data and Colors:

Open the triangle_stacks.html file in a web browser; no web server is required.

Within the file, you will find a data array that represents the progress of the match in terms of goals scored.

 const data = [
    [0, 1],
    [0, 2],
    [1, 2],
    [2, 2],
    [2, 3],
    [3, 3],
    [3, 4],
    [3, 5],
    [4, 5],
    [5, 5],
    [6, 5],
  ]

You can modify the 3-letter country codes to display different teams.

 const TEAM1 = "BRA";
    const TEAM2 = "CRO";

   Additionally, you have the freedom to adjust the color scheme by editing the colorSet object.

  const colorSet = {
      "bg": "#f2eee3",
      "team1": "#eb7150", //color for TEAM1
      "team2": "#222" //color for TEAM2
    }

    Recording the Animation:

Unlike the previous option, this method does not have a built-in export feature. To obtain a GIF file of the visualization, you will need to record your own screen.
I would recommend using
• ScreenToGif (Win)
• LICECap (Mac).

Constrains:

If your team or athlete names exceed the length of 3-letter country codes, you will need to adjust the placement of the text within the visualization manually. This option also shares similar disadvantages to the previous one, including challenges in visualizing penalty scores, gaps for halves/periods/quarters/overtime and simultaneous scores.

How the animation works – in case you want to recreate it in another tool

The animation is built by adding simple triangles on top of one another. The starting shape appears as a simple line, but it is actually a polygon with three points, where point B and C are in the exact same position. With a transition, we move point C upwards to make the triangle appear. When the other team scores a goal, we add a new line created by three points on the edge of the previous triangle, covering the line between points A and C. Then, we move point F up in the same way as we did with point C.

Useful links

Animated Sport Results
FIFA World Cup 2022
“Stacked triangles” were inspired by Basketball Tower Charts (Andrew Garcia Phillips, Chartball.com)
Thanks to István Korompai for the frame export idea