Line chart race – an overview

What is it for?

1

The first thing you need is a CSV or Excel file of your data

2

You need to make sure that there’s a row for each participant in the race – like a candidate or a football team. Populate the first column with the participants’ names. Every other column is a “stage” of the race – like a specific date, week or year.

name	Day 1	Day 2	Day 3
Lance Armstrong	0	4	7
Chris Hoyle	0	3	6

3

NOTE: This template includes one of our most exciting Flourish features yet – the auto-set of columns in the Data tab! Therefore, you may notice that based on their data type, some of your columns are automatically assigned to relevant column bindings.

Once you've inputted your data, you should be able to see a preview of your chart in the bottom right corner. If you don't see a preview, you might have to change some of the column settings on the Select columns to visualise panel. Make sure that you add all the columns containing values relevant to your line chart race to the Values setting. You can read more about column settings and adding your own data to a template here.

4

To assign an image to each competitor, add an image URL to a column. Under the Data tab, in the Select columns to visualise panel, there’s an Image column setting. Assign this setting to the column containing the image URLs you just added. Then switch to the Preview view, and to the right, on the Settings panel, under Circle styles, make sure the setting for Image inside circle is set to On. You can read more about adding images to your visualization here.

5

Now you can customize the axes of the visualization to your liking. You can position the X axis on the top or bottom of the chart by going to the X axis settings tab. Additionally, the Flourish editor is capable of handling axes with numbers, percentages, or dates and it also allows you to set as many tick marks as you like by changing Ticks to show mode from the default Auto to Custom.

6

When building your race chart it's important to make sure that the labels are placed correctly. This template offers optimized label positioning to prevent overlaps. Activate it by going to the Label styles settings and toggling the Overlaps option. You can choose to spread them out, hide the labels that do overlap or leave them as is.

You can also choose between different options of how to show labels.

7

Try adding your line chart race to a story and clicking on the axis labels to show different stages of the race in different slides

8

You can also experiment with the different view modes. The All mode will show the full length of the chart statically, so the lines will move towards the end of the axis. The Zoomed view keeps the dots representing the competitors in the center while the axes animate in the background. Finally, the Reveal mode, as the name suggests, reveals the X axis as the lines move forward.

9

Finally, you can add an extra layer of information to your chart by using the template's captions. Next to the Data tab there's the Captions tab where you can set the year when the caption should be made visible, the year in which it should disappear, and the content of the caption, of course. You can also add an image to your caption by inputting a file on the Image column. Captions can be used to highlight trends or to mention external factors that may be related to the state of the race at any given point.