Fork of CV: Scatter Plot

100%

Fork of CV: Scatter Plot

✓ Published0🌍 Public

Last edited Sep 30, 2026

Created on Sep 30, 2026

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.

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

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

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

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

92% 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.

90% match