Sports race – an overview

What is it for?

The Sports race template is great for visualizing competitions where  athletes race along fixed distances such as a 200m sprint or windsurfing. Specifically introduced in time for the 2020 Olympics in Tokyo, this template is great for any competition you wish to animate and annotate!

How to get started

1

Choose from one of the Sports race starting points in the template chooser.

2

In the Data tab, add one row of data for each participant in the race. The first column should typically be the name of the participant, followed by columns that include the times of the race. For these Times columns, you can include:

• Finishing times
• Lap times
• Checkpoints along the route

The required time format is DD:HH:MM:SS.sss. See the table below for reference:

You can also add an image and color category for your data if you want to add flags, images of the runner and categorize the data points by country or team.

3

Head to the Preview tab. Depending on the competition/race you want to visualize, you will want to change the Track type underneath the Track settings. The template already offers three tracks:  Athletics, Swimming, and Sailing. 

You also have the option to upload your own custom SVG so that you can visualize any race or competition needed. To find out how to upload your own custom SVG into the Sports race template, click here.

4

Next, you can decide on the view of your Sports race under the Camera settings. Here there are two options for Camera mode: 

• Entire track means the full track or course will be on display throughout the animation
• Follow leader will zoom into the current location of the leading competitor, following them along the course of the race. If you go for this option, you can also set a zoom level.

Now you've got your Sports race set up and ready, click on the links below to jump to steps for further customization:

5

If you have several columns of data connected to the Times binding in the datasheet you may want to adjust the Laps and splits settings. If you just have one column of finish times, you should be all good to go already so skip this step!

Under the Laps and splits settings there are three different Checkpoint modes:

• Laps treats each column of your Times data as one lap around the track you've chosen. For example, if you have three columns of values, your participants will run around the full track three times according to the values in your data before finishing.
• Equal splits divides your track or course into the number of columns of values you have. That means your participants will only make their way around the track once, taking the same amount of time as the sum of all their values in the datasheet.
• Custom allows you to specify exact checkpoints for your track. Enter the number of laps completed at each checkpoint on a separate line. For example, if you have three columns of data type typing 0.5, 1, 1.5 on separate lines would mean that each checkpoint would be hit after half a lap.  

If your columns of data are not cumulative, you will need to disable the Times are cumulative option. For example, if your data consists of 3 columns (e.g. 5, 7, 11) and the setting has been turned off , this would mean that the contestant took 5, 7 and 11 seconds to finish the first, second and third lap respectively - meaning that he finished the race in 23 seconds.

However, if the Times are cumulative option has been turned on, this would then mean that the contestant finished the first lap in 5 seconds, the second lap in 2 seconds (on the 7th second since the start of the race) and the third lap in 4 seconds, meaning that he finished the race in 11 seconds.

6

Now you can change how your participants appear on the track by going to the Participants settings. If you prefer icons, switch from Circle to Image under Icon Type and choose from the dropdown list. 

Like the tracks, we have a Runner, Swimmer, and Sailing boat available, but you can also choose Custom and upload your own icon.

TIP: Remember you can also add a column binding in the datasheet to specify individual image icons for each participant.

7

Under the Labels settings, you can change the label styling, whether to include position information and medals, and change the stacking order of your icons.

For Label mode, the Auto option is set as default and shows as many labels as possible without overlapping. You can also choose to show labels for the Leader only or for All participants.

Position information tells you who's coming 1st, 2nd, 3rd, etc. in the race. You can have this information showing Always, During race, only At finish, or disable it completely.

The Medals settings refer to the medal icons that appear next to those in 1st, 2nd and 3rd position only. You also have settings to enable/disable medals and if enabled, when they should display.

Finally, the stacking order is only relevant when your icons overlap each other, like in the Sailing track type when boats are close together. With these options, you can choose how the icons are stacked. 

Maybe you want them placed in Data order as they appear in the datasheet, or you always want the Leader first, or you could have them stacked by their Y position.

8

The final settings block to consider is Timeline and animation. Here you can choose between a timeline or just a playback button and customize their styling. 

Under Timing and animation in this settings block, you can also have some key options to set:

• Timeline duration is the total length of the timeline in seconds
• Duration before loop is the amount of time the template should wait at the end of the timeline before looping back through the race 
• Time jump duration is the amount of time taken to animate between slides of the visualization in a Flourish story

9

For your convenience, you can download and use our base SVG files for swimming, cycling and athletics sports in your projects. Just click on each link and the files will start downloading.

That's it! Try it out for yourself by clicking on the button below.