fCC D3 Project #2: Scatterplot Graph

100%

fCC D3 Project #2: Scatterplot Graph

✓ Published0🌍 Public

Last edited Sep 20, 2025

Created on Sep 19, 2025

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.

AI-generated description

Almost done. Need to make the tooltip part.

Update: I finally finished the project.

Hats of to Dr. Curran Kelleher for the full tutorial. Helped me a lot in understanding how to handle D3.

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

89% 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

88% match

Loading thumbnail…

FCC Scatter Plot

This scatter plot visualizes cyclist performance data from the freeCodeCamp ProjectReferenceData repository, showing each rider’s year and race time in seconds. The D3.js v6 code loads the dataset with `d3.json`, maps years and times using `scaleTime` and `scaleLinear`, and renders circles with `selectAll` and `join`. Axes are generated via `axisLeft` and `axisBottom` on an SVG canvas that fills the window. Each dot carries `data-xvalue` and `data-yvalue` attributes for potential interactivity, though no tooltip or hover behavior is implemented.

Ddaria.daria

87% match

Loading thumbnail…

Doping in Professional Bicycle Racing

This scatter plot visualizes doping allegations in professional bicycle racing, with each circle representing a rider’s race time (y-axis) plotted against the year (x-axis). The color distinguishes riders with doping allegations from those without, and a tooltip reveals the rider’s name, nationality, year, time, and doping details on hover. Built with D3 v5, it uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, `scaleOrdinal` with `schemeCategory10` for colors, and `timeFormat` for time labels. Data comes from a FreeCodeCamp JSON file, rendered as SVG with a custom legend and tooltip.

Vvaynexie

85% match

Loading thumbnail…

Fork of Question 3 scattered plot

A scatter plot displays the fastest recorded times for professional cyclists, with each dot representing a rider’s year and finishing time. Red dots indicate doping allegations, green dots indicate no doping, and hovering reveals a tooltip with the rider’s name, nationality, and details. Built with D3 v5 and Vue, the visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleTime` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick generation. Data is loaded via `d3.json` from the freeCodeCamp cyclist-data dataset.

Nneeleshalapati@gmail.com

85% match

Loading thumbnail…

fcc-d3-02

This example visualizes doping allegations among the 35 fastest recorded times up Alpe d’Huez, plotting each cyclist’s year against their finishing time. Blue and red dots distinguish riders without and with doping allegations, with a legend and axis labels. The interactive tooltip reveals the rider’s name, nationality, year, time, and doping details on hover. Built with React and D3 v7, it uses `scaleLinear`, `scaleOrdinal`, and `extent` to map data from a freeCodeCamp JSON source, rendering SVG circles and handling mouse events via `select` and `append`.

SSiddharthMittal07

83% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes 35 fastest times up Alpe d'Huez in professional bicycle racing, plotting year against race time in minutes and coloring each dot to indicate whether the rider faced doping allegations. The chart uses d3.scaleLinear for the x-axis, d3.scaleTime for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. An interactive tooltip displays rider details, nationality, year, time, and doping information on hover. The visualization renders as SVG, using React 16 and D3 v5 to load data from a JSON file and generate axes with d3.axisBottom and d3.axisLeft.

Vvaynexie

83% match

Loading thumbnail…

Doping In Cycling, ICE-7

This scatter plot visualizes doping in professional bicycle racing, showing each rider’s finish time against the race year, with circles colored by whether doping allegations exist. It uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `schemeCategory10` for color encoding, and a custom tooltip on mouseover. Data comes from a CSV loaded via `d3.csv`, with times parsed into date objects using `d3.timeFormat`. Axis ticks include gridlines, and a legend distinguishes allegations from clean riders.

HHarshinireddyy19

82% match