Skip to main content
100%

race results

✓ Published0🌍 Public
Aandrewcowley
Last edited May 3, 2018
Created on May 3, 2018

This visualization maps race results by plotting each runner's finishing position against their time. Circles are placed along the x-axis by position and along the y-axis by minutes extracted from the time string (split on ':'), with a fixed radius of 4 pixels and a teal fill. Built with D3 v4 and SVG, it loads data from a TSV file listing position, name, sex, and time, encoding each runner as a circle. The y-coordinate is computed by multiplying the minute component of the time by 5, creating a vertical spread of finish times relative to rank.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Visualize Data with a Scatterplot Graph | fcc project-2

This scatterplot graphs 35 fastest times up Alpe d'Huez, with orange and blue circles distinguishing riders with and without doping allegations. The visualization uses d3.scaleLinear for both axes, parsing race times into Date objects for the y-axis. Built with React and d3.v7, it renders SVG circles that trigger an HTML tooltip on mouse hover, displaying rider details from the freeCodeCamp cyclist-data.json dataset. A legend clarifies the color coding for doping status.

MMohammed Banani | MbDev
71% match
Loading thumbnail…

Matrix

A matrix of small multiples displays ski racing performance data, with each row representing a skier (by bib number) and each column a split point along the course. Individual circles plot performance values, jittered on the x-axis to reduce overplotting, with axes scaled via `d3.scalePoint` and `d3.scaleLinear`. Built with D3 v7, the SVG visualization uses `d3.groups` to organize data by bib and renders interactive circles that highlight on mouseover, styled with CSS. Data originates from a CSV file of timing differences.

CChristian Magelssen
71% match
Loading thumbnail…

Final Project: 2024 Boston Marathon Data Vis

This interactive visualization displays 2024 Boston Marathon finisher data aggregated by U.S. state on an Albers equal-area projection map. Users can toggle between four coloring metrics—number of finishers, average finish time, average age, and average second-half split difference—with darker state colors indicating higher values. Circle size encodes the finisher count per state. Built with D3.js and topojson-client, it loads state boundaries from the us-atlas TopoJSON, parses CSV data via d3.csvParse, and renders geographic paths using d3.geoPath and a tooltip on hover.

BBen Trantanella
70% match
Loading thumbnail…

Transat Jacques Vabre

This visualization tracks the positions of racing sailboats in the Transat Jacques Vabre, plotting each vessel's latitude and longitude as points on an SVG map. It uses the D3 v4 library to render the race data from a semicolon-delimited CSV, encoding boat rank through color or label placement. The chart highlights the geographic spread of the fleet, with tooltips likely revealing boat name, crew, distance to finish, and speed. The minimalist design focuses on the spatial relationships between competitors at a single timestamp, emphasizing the race's tactical aspect.

Aaangelot
70% match
Loading thumbnail…

fCC D3 Project #2: Scatterplot Graph

This scatterplot visualizes the performance of professional cyclists, plotting race times against years. The time to complete the course is mapped on the y-axis using a time scale, while the x-axis uses a linear scale for the year. The graph distinguishes between riders with doping allegations in blue and those without in red, and includes a legend for clarity. Data is fetched from the freeCodeCamp cyclist-data.json. The visualization is built with D3.js (version 7.9.0), using the `scaleTime` and `scaleLinear` APIs, and renders an SVG with tooltips that display rider details on hover.

CCasualWanderer20XX
70% match
Loading thumbnail…

Run Pace Viz experiment #10

This visualization charts a runner's race pace against a goal pace, using D3 v3 with SVG and animation. A blue area highlights portions of the run where the pace is faster than the average, while red shading indicates slower segments. An elevation profile is layered beneath the pace data, and mile markers fade in sequentially along the top. The chart also includes a goal line and labels for average pace, run time, and faster/slower indicators, providing a comprehensive view of pacing relative to terrain and target.

Aalanmclean
70% match
Loading thumbnail…

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.

Gg_beck@coloradocollege.edu
70% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes doping allegations in professional bicycle racing, plotting race times (in minutes) against years for individual riders. Each circle represents a rider, color-coded to distinguish those with doping allegations from those without, with a legend clarifying the categories. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleTime` for time-based y-values, and `scaleOrdinal` with `schemeCategory10` for colors. Interactive tooltips appear on mouseover, showing rider details using D3 events. Data comes from freeCodeCamp’s cyclist-data.json dataset, with parsed time strings converted to Date objects for accurate axis formatting.

VVansh1019
69% match