Interactive Line, TDF time gaps
This interactive scatterplot visualizes time gaps between first place and other positions in the Tour de France from 1903 to 2023, with data sourced from a GitHub-hosted CSV. Users select which gap to display via a dropdown menu, and each dot represents a race year with tooltips revealing winner details and converted time formats. The visualization uses d3.v7 with SVG rendering, d3.line for trend paths, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for tick marks. Manual Y-axis range inputs allow dynamic rescaling, though the underlying data spans large temporal and numerical domains.
AI-generated descriptionThis file is a continuation of trying to see which countries (and which riders) are most dominant in the tour de France. This is a scatterplot of the time gaps in seconds from first to different positions over time. You can select which gap you'd like to see using the drop down. Try mousing over points to get more informations.
Things I still am working on:
- The lines don't disappear when they should, which is annoying.
- The domain of the data in both axis is very large, so it hard to fit on a single plot. I'm hoping to make the axis dynamically resiable.
- I think seconds aren't the most inuitive measure of time, so there can be mroe data processing.
- Axis labels are awesome.
- The big goal is to link this to a CHOROPLETH with a map to be able to group dots.
Here is my progress on the map: <a href="https://vizhub.com/georgeb3ck/c87929a3cf1346a194423a92848d6768">map link</a>