Thursday, July 23, 2015

The Tour de France in 3D


Recently the Wall Street Journal created a WebGL 3D interactive visualization of the Col d'Allos mountain stage in the Tour de France. The Guardian has now followed suit with a WebGL visualization of the Alpe d'Huez stage of this year's race.

Stage 17 of this year's Tour de France included the popular Col d'Allos mountain stage. The Col'Allos is one of the most popular mountain passes in the Tour de France and this year was the 34th time the route was included in the race.

The Wall Street Journal created a detailed map of the stage's big descents. The Madness of the Descent looks in particular at the Col d'Allos. During Stage 17, after a steep climb, with an average gradient of 5.5%, the riders faced a 10 mile descent, where they lost 3,400 feet in vertical elevation.

The Wall Street Journal's article includes an impressive 3d map of the Cal d'Allos pass. The 3d Col D’Allos visualization was created with WebGL and three.js. If you select one of the three yellow map markers the graphic pans and rotates to highlight different views of the Col D'Allos descent.

Stage 17 was won by the German Giant-Alpecin rider, Simon Geschke.


Stage 20 of this year's Tour de France will for the 29th time feature the famous Alpe d'Huez ascent. Stage 20 will take place this Saturday.

The Guardian's The Climb of Alpe d'Huez is a 3d tour of the 14km ascent. The visualization includes forward and back buttons which allow you to progress through the route of this mountain stage. As you progress through the route the 3d map of the Alpe d'Hues rotates and zooms to highlight some of the most important points in the climb.

No comments: