FCC Scatter Plot

100%

FCC Scatter Plot

✓ Published0🌍 Public

Last edited Jan 7, 2023

Created on Jan 1, 2023

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.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

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

82% match

Loading thumbnail…

Scatter Plot with Color Legend

This example displays a scatter plot of cycling race data from the FreeCodeCamp ProjectReferenceData repository, plotting year on the x-axis and race time on the y-axis. The visualization uses D3 v5 scales and axes, with a time format for the y-axis and a linear scale for years. React 16.9 renders the interface, while D3’s `json` loads the dataset. The code includes both a React-based color legend component and circle marks, though the main chart uses D3’s append pattern within a single SVG.

Vvaynexie

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

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

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

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

76% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example renders an interactive scatter plot of cyclist performance data, fetched as JSON and positioned using D3 scales. The visualization maps petal width and sepal length values (from the Iris dataset) to SVG circles, with axes generated via `axisLeft` and `axisBottom`. Using `d3.scaleLinear` and the reusable chart pattern, the plot updates its x- and y-value bindings dynamically, though the active configuration showcases a single static view with animated potential commented out.

Ddaria.daria

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

74% match