Fork of CV: Scatter Plot

100%

Fork of CV: Scatter Plot

✓ Published0🌍 Public

Last edited Nov 1, 2025

Created on Oct 18, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Fork of 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.

HHariniPotla@my.unt.edu

95% match

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

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

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

92% match

Loading thumbnail…

Fork of Iris Scatter Plot

This scatter plot visualizes the sepal length and width of Iris flowers from a CSV dataset. The visualization uses D3.js scaleLinear functions to map data to SVG coordinates within a React application. Axis components render tick marks and labels, while circular marks represent individual data points with tooltips. The code styles elements using CSS, including custom fonts and a teal color for the marks, and implements responsive loading with a "Loading..." indicator.

SSam Hege

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

90% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses React dropdown menus to dynamically switch which measurement attributes are plotted on the x and y axes, with points colored by species. Built with D3.js v5 and rendered as SVG, the code uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` to construct the plot. The iris data is loaded via `d3.csv` from a linked gist.

Ssaivinay143

90% match