scatter plot

100%

✓ Published0🌍 Public

Last edited Oct 25, 2025

Created on Oct 25, 2025

This interactive scatter plot animates through the columns of the Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds while keeping y-axis fixed at sepal length. The visualization uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, with SVG circles positioned dynamically. The code applies a reusable `scatterPlot` module that recalculates data mappings on each interval, rendering a full-screen SVG that updates in place.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This animated scatter plot explores the Iris Dataset, cycling through four measured attributes on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles via SVG. Every two seconds, the plot updates its x-value mapping to a different column, smoothly redrawing points to reveal correlations between petal width, sepal width, petal length, and sepal length. The animation demonstrates a reusable chart pattern with configurable width, height, margins, and radius.

Ppavankalyan1507

94% match

Loading thumbnail…

draft

A scatter plot animates through the Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds while keeping sepal length on the y-axis. Built with D3 v6, the reusable `scatterPlot` function uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and circles via SVG, with data loaded through `csv`. The animation updates the plot’s x-value accessor and re-invokes the chart, producing a dynamic exploration of iris flower measurements.

Hharipriyaa07

92% match

Loading thumbnail…

Iris dataset scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping measurements like petal width and sepal length across three flower species. Using D3.js with an SVG rendering and animation, the chart automatically cycles through different x-axis variables every 15 seconds, updating the visualization via a reusable scatterPlot function. The code employs d3.scaleLinear for axes, d3.scaleOrdinal for symbol types, and d3.symbol to render distinct species markers, with data loaded asynchronously from a CSV source.

Ggayathrikavya

91% match

Loading thumbnail…

Scatter plot Activity 8

Drawing live from the Iris dataset, this animated scatter plot cycles the x-axis between petal width, sepal width, petal length, and sepal length. Colored circles distinguish the three species using custom markers. The visualization is built with D3 v6’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loader, with a `setInterval` updating the plot’s x-value and re-rendering SVG elements.

Jjaideeptripurani12@gmail.com

91% match

Loading thumbnail…

Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through different feature pairings every two seconds to reveal patterns in flower measurements. The visualization uses D3.js scales and axes to map petal width, sepal length, petal width, and sepal length onto the plot, with circles representing individual data points. The chart animates by re-calling the scatter plot component with new x-value accessors, smoothly updating the axis and circle positions via D3's data join. The SVG rendering and reusable chart pattern follow the "Towards Reusable Charts" methodology.

TTarun Kumar Bosupally

91% match

Loading thumbnail…

Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements across three species, with each species distinguished by a color-coded legend. The visualization cycles through different column pairings every two seconds using `setInterval`, updating the x-axis scale and circle positions. Built with D3 v6, the code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the SVG circles and axes. Data is loaded from a CSV file using `d3.csv`, with species colors mapped via `d3.scaleOrdinal` and a custom `scatterPlot` function managing the reusable chart logic.

Sskambhore04

91% match

Loading thumbnail…

Reusable scatter plot

This reusable scatter plot animates through the Iris Dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds while keeping petal length on the y-axis. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `csv` to load data from a GitHub Gist. SVG circles are colored by species, with a legend and axes updated via the `scatterPlot` closure pattern, rendering dynamically to the full browser window.

AArv1228

91% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying sepal and petal measurements as colored circles representing three flower species. The chart cycles through different measurement combinations every two seconds, updating the x-axis dynamically. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and reusable chart functions. The SVG rendering responds to window dimensions, and the animation runs via `setInterval`, with colors mapping species types.

AAlankruthSai

91% match