F1 Calendar Map
borntofrappe opened this issue · comments
The F1 website recently published the race calendar for the 2022 season.
Highlight the destinations geographically, and taking inspiration from a bl.ock introducing faux-3D arcs.
Consider recreating the faux-3d arc demo and the underlying shaded globe demo.
Goal
(updated) from original issue
Display the circuits of the programmed 2022 F1 season with a geographical visualization. Focus on one circuit at a time and rotate the globe, animating arcs between tracks.
Links
- 2022 announced calendar (whether the 2022 season actually took place as expected is outside of the project's scope)
- Faux-3D arc bl.ock. The demo inspires the project by providing two challenges: 1. how to shade the orthographic projection to further the illusion of depth and 2. how to create arcs to connects the points on the map
The project is almost finished, see clip for the ultimately working demo 👍
Progress.mp4
Proposed: 15 October 2021.
Started: 21 October 2022.
Finished; 28 October 2022.
Even with the exceedingly long development cycle I am still proud of the end result.
Design
Inspired by the F1 website.
Animation
Inspired by the project faux-3d arc, although I did manage to implement the arcs in my own way.
F1.Calendar.Map.Animation.mp4
Topics
- d3-geo
- topojson
- transition
- stroke animation
There's even a bit of logic to create a curve between two points and to retrieve the longitude and latitude given a number of degrees, minutes, seconds 👏
Needs documenting. Update the markdown document with the most salient features.