Skip to main content
SimilarExport ZIP
100%

Fork of CV: Scatter Plot

✓ Published0🌍 Public
HHariniPotla@my.unt.edu
Last edited Mar 25, 2026
Created on Mar 25, 2026
Forked from CV: Scatter Plot

This interactive scatter plot displays the classic Iris dataset, plotting sepal length against sepal width for 150 flowers across three species. Built with React and D3 v7, the visualization renders circles as SVG elements, with clicking a point highlighting it by turning it white with a black stroke. The code uses `d3.scaleLinear` and `d3.extent` to create scales, `d3.axisBottom` and `d3.axisLeft` for axes, and a `ResizeObserver` to make the chart responsive to its container.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, showing sepal length against sepal width for 150 flowers across three species. The visualization, rendered with SVG and built using React, D3.js, and the `select`/`join` API, allows users to click any circle to highlight it. It uses `d3.axisBottom` and `d3.axisLeft` for axes, `d3.scaleLinear` for scales, and `ResizeObserver` for responsive sizing. The code loads data from a local CSV file.

Oomogyliuk@gmail.com
97% match
Loading thumbnail…

Fork of CV: Scatter Plot

This example displays the classic Iris dataset as an interactive scatter plot, plotting sepal length against sepal width for 150 flowers. Each circle represents a sample, colored and stroked in red when clicked to highlight a specific data point. Built with React, the visualization uses D3 v7 APIs such as `scaleLinear` for axes and `axisBottom`/`axisLeft` for ticks, with the SVG rendered declaratively. Circle transitions use CSS for smooth hover effects, while a custom `ResizeObserver` hook ensures the plot adapts to its container’s dimensions.

AAaron
97% match
Loading thumbnail…

Fork of CV: Scatter Plot

This scatter plot displays the classic Iris dataset, plotting sepal length against sepal width for 150 flowers. Red circles represent individual samples, and clicking one highlights it with a white fill and red stroke. Built with React and D3 v7, the visualization uses `d3.scaleLinear` and `d3.extent` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG circles via data joins. The chart is fully responsive through a `ResizeObserver` hook, and includes labeled axes with configurable margins.

Kkrishnatiwari1605@gmail.com
96% match
Loading thumbnail…

Fork of CV: Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, displaying sepal length against sepal width for 150 flowers. Users can click individual data points to highlight them in yellow, with transitions animating the visual feedback. The React application uses D3 v7 methods like `scaleLinear`, `axisBottom`, and data joins to render axes and circles as SVG elements. A background iris flower illustration, decorative flower pot, and ornamental "SEEDS" text overlay enhance the visualization's aesthetic appeal.

JJohn A. Dodge
95% match
Loading thumbnail…

Fork of CV: Scatter Plot

This example shows a scatter plot of the classic Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Clicking a circle highlights it with a white fill, bold stroke, and pointer cursor. Built with React and D3 v7, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scales, and `axisBottom`/`axisLeft` for axes. SVG circles are rendered via data joins with click event handlers, while a ResizeObserver tracks container dimensions for responsive sizing.

Eeko.5samuel@gmail.com
95% match
Loading thumbnail…

Fork of CV: Scatter Plot

This scatter plot displays sepal length against sepal width from the Iris dataset, with each flower represented as a circle that can be clicked to highlight its selection. The React app uses a ResizeObserver to track container dimensions and re-renders the SVG visualization when data or selection changes. Built with D3 v7, it leverages scaleLinear, extent, axisBottom, axisLeft, and data joins to render circles and axes, with labels and margins configurable through props.

Eeko.5samuel@gmail.com
93% match
Loading thumbnail…

CV: Scatter Plot

This scatter plot visualizes the classic Iris flower dataset, displaying sepal length against sepal width for 150 samples. Built with React and D3 v7, it renders circles as SVG elements with semi-transparent black fill, using D3 scales and axes for accurate positioning. Clicking a circle highlights it with a white fill and black stroke, demonstrating interactive selection within a React-managed state. The visualization uses `csv` loading for data parsing and `ResizeObserver` for responsive container dimensions.

CCurran Kelleher
93% match
Loading thumbnail…

Fork of Scatter Plot with React & D3

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for 150 flower samples. The visualization uses React to manage component state and lifecycle, with D3 v7 handling the rendering pipeline. D3’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` functions generate the axes and scales, while reusable modules for axes and labels keep the code modular. Circles are bound to the data via D3’s data join, with fixed radius and color. Data loads asynchronously from a CSV file and is parsed into numeric values before rendering.

Sskasliwal@wpi.edu
92% match