Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Legend

✓ Published0🌍 Public
Vvaynexie
Last edited Jan 4, 2020
Created on Jan 4, 2020

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.

AI-generated description

A scatter plot of 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
81% 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
79% 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
79% 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
79% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris dataset as a scatter plot, encoding petal length on the x-axis, sepal width on the y-axis, and species as color through a categorical legend. It uses D3 scales (scaleLinear, scaleOrdinal) to map data to positions and colors, while React components—AxisBottom, AxisLeft, ColorLegend, and Marks—render the SVG axes, circles, and legend. The data loads asynchronously via d3.csv, and the chart includes native SVG tooltips via the title element.

RRitik Raj
78% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris dataset as a scatter plot, encoding petal length on the x-axis, sepal width on the y-axis, and species as color through a categorical legend. It uses D3 scales (scaleLinear, scaleOrdinal) to map data to positions and colors, while React components—AxisBottom, AxisLeft, ColorLegend, and Marks—render the SVG axes, circles, and legend. The data loads asynchronously via d3.csv, and the chart includes native SVG tooltips via the title element.

RRitik Raj
78% match
Loading thumbnail…

Scatter Plot Example

This scatter plot visualizes a dataset of x and y coordinates as colored points on a linear scale. The code uses D3.js v6 to create an SVG rendering with x and y axes, and colors each circle based on its index. The visualization demonstrates basic scatter plot construction with d3.scaleLinear for mapping data values to screen coordinates, and d3.axisBottom and d3.axisLeft for displaying the axes. Labels are added to both axes to indicate the plotted dimensions.

BBhavanaGIrni
78% match
Loading thumbnail…

React Scatter Plot w/ Color Legend

This example presents a scatter plot of the Iris dataset, mapping sepal length and width and coloring each point by species, with a color legend displayed to the right. The plot is rendered as an SVG using React components that leverage d3-scale for linear and ordinal scales, while axes are generated with d3’s tick methods and formatting via d3-format, with data loaded using d3.csv.

AAnthony Ynami
78% match