Fork of CV: Scatter Plot

100%

Fork of CV: Scatter Plot

✓ Published0🌍 Public

Last edited Jan 2, 2026

Created on Jan 2, 2026

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.

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

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

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

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

91% match

Loading thumbnail…

Fork of Scatter Plot-iris data

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and sepal width to the y-axis. Each flower is rendered as a large blue circle using SVG within a React framework, with the plot area offset by margins via a group transform. The code loads data from a remote CSV file using D3’s `csv` function, converts values to numbers, and scales positions with `scaleLinear` and `extent`. The chart fills the browser window, as the body has no margin and hidden overflow.

NNita

89% match

Loading thumbnail…

Fork of Scatter Plot

This visualization shows the relationship between sepal length and sepal width in the Iris dataset, with each flower represented by a circle. The scatter plot uses D3’s `scaleLinear` to map data values to SVG coordinates, with axes rendered by custom components that generate tick lines and labels. The React-based code loads the dataset via D3’s `csv` function, then lays out the plot within an SVG canvas, using a Poppins font and muted color palette for the marks and gridlines.

Aadewole-top

89% match

Loading thumbnail…

Fork of Scatterplot with Iris Data

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length to the x-axis and sepal width to the y-axis, with each point colored by species. The React component uses d3.scaleLinear and d3.extent to set the scales, while d3.csv loads the data from a gist. SVG circles are rendered with embedded tooltips showing the sepal length value on hover. The chart includes labeled axes, a bottom axis with tick formatting via d3.format, and a left axis, all built from custom React components that generate SVG elements.

89% match