Fork of CV: Scatter Plot

100%

Fork of CV: Scatter Plot

✓ Published0🌍 Public

Last edited Nov 27, 2025

Created on Nov 27, 2025

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.

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

Loading thumbnail…

Fork of Scatterplot with Iris Data - cat input

This interactive scatterplot displays the classic Iris dataset with sepal length on the x-axis, sepal width on the y-axis, and species information as a categorical input. The visualization uses React components alongside D3.js v7, employing `scaleLinear` for continuous axes and `scaleBand` for categorical species positioning, though the band scale currently maps to the vertical range rather than a separate axis. SVG circles represent individual flowers, colored in teal, with native tooltips showing formatted values. The data loads asynchronously via D3's `csv` parser from a GitHub gist, and the axes are rendered as custom React components.

Aafcchilders

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