A data visualisation of cycling's toughest sporting competition.

The Tour de France is an annual men's multiple-stage bicycle race primarily held in France, while also occasionally passing through nearby countries. It consists of 21 stages, each a day-long, over 23 days around July.

The competition is incredibly tough and gruelling. Watching the 2021 tour got me thinking, which tour is the toughest? Using data available I derived five factors of toughness to the score the tours and create this eye-catching and illustrative visualisation.

• Tour de France dataset source from Kaggle/tour-de-france-winners, Kaggle/tourdefrancedatase, TidyTuesday
• Highest point on tour from Wikipedia/List_of_highest_points_reached_in_the_Tour_de_France
• Coxcomb padding from CJ Mayes/player-metrics
• Updating any missing data with letour.fr

The data is read and reshaped using an R script, this script:

• reads data from all the data sources
• updates any missing figures up to 2021 with data from letour.fr
• cleans data sets (characters accents mainly)
• creates scaling factors for the 5 metrics to visualise in coxcomb chart from CJ Mayes/player-metrics
• create tooltip string for Tableau

The output of this process is the dataset: data/the_toughest_tour.csv

The visualisation aims to show five factors associated with each year's Tour de France, the factors are designed to line up with the race's jersey competition tour-de-france-jerseys.

• 🟨 Yellow Jersey -> Race Leader -> Level of competition (when was the lead decided)
• 🟧 Polka Dot Jersey -> King of the Mountains -> Highest point on the tour
• 🟩 Green Jersey -> Leader in Sprinters Competition -> Average pace of the race winner
• 🟥 Combativity Award -> Number of riders that abandoned the race
• 🟦 No Jersey -> Overall distance

Details of the Tour de France are unlikely to be well known to all the readers so several text elements were used to explain the sport and invite the readers to explore the data, to make the visual accessible for all.

Colour hues were also checked and tested using color-blindness.com/coblis-color-blindness-simulator/, results as follows. In this case, readers can also distinguish between the factors by colour and the segment angle, so the viz can still be understood by a monochrome view but it is much easier if the colours are distinct too, in most cases this is true.

This is a dashboard of two sheets:

• Coxcomb: the repeated coxcomb chart for each year the Tour de France was held
• tooltip: the hidden tooltip sheet called by Coxcomb on a hover over action, filter by Year and Metric

Coxcomb was created using the amazing tutorial and template from CJ Mayes/player-metrics and replacing the background image for my own Figma version: coxcomb_background_image

Tooltip is a list of all tooltips from the dataset: data/the_toughest_tour.csv next to a square mark, coloured by the metric it represents. This sheet is then called in the tooltip of Coxcomb, filtering by Year & Metric, filter="<Year>,<Metric>"

Many elements of this visualisation were created in Figma, including all the static text using the font: Open Sans

Images created in Figma can be found in /figma, of note:

• underlay forms the lowest level of the dashboard with everything else floating on top of it
• coxcomb_background_image is imported into Tableau as a background image for the Coxcomb sheet (X field: 5a.X, Left: -7.4, Right: 7.4 | Y field: 5a.Y, Bottom: -7.4, Top: 7.4)
• as coxcomb_background_image repeats even when there is no data available: 1903, 2020s, WW1, WW2 are floated at the top of the dashboard to hide empty wheels and provide some commentary on the data.

Will Sutton, Sept 2021
Twitter 💬   |   LinkedIn 👔   |   GitHub    |   Website 🔗