Skip to main content
SimilarExport ZIP
100%

ScatterPlot

✓ Published0🌍 Public
AAlankruthSai
Last edited Mar 28, 2022
Created on Mar 28, 2022

This animated scatter plot visualizes the Iris dataset, color-coding points by species (setosa, versicolor, virginica) and cycling through the four numeric attributes for the x-axis every two seconds using `setInterval`. The reusable chart, built with D3 v6, uses `scaleLinear`, `axisLeft`, and `axisBottom` to map petal and sepal measurements to SVG circle positions, with a custom `scatterPlot()` factory function managing dimensions, margins, and axis updates.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal length and sepal width while coloring each point by species (setosa, versicolor, or virginica). The visualization cycles through four attribute combinations every two seconds using `setInterval`, updating the x-axis and circle positions accordingly. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with SVG circles rendered via `selectAll` and `join`. The code also includes manually appended axis labels and a custom color scheme.

RRaja Srinivas Nelluri
92% match
Loading thumbnail…

Reusable Scatter Plot

This animated scatter plot visualizes the Iris flower dataset, cycling through four feature combinations on the x-axis while keeping sepal length on the y-axis. Data points are colored by species—orange for setosa, blue for versicolor, and black for virginica—with a dynamic legend that updates alongside axis labels. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` within a reusable `scatterPlot` module, driven by `setInterval` to rotate the displayed attribute. The SVG rendering includes custom circle shapes with elliptical radii and a color-coded species legend.

RRupeshGandham
91% match
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
91% match
Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot displays the Iris dataset, cycling through different x-axis attributes every two seconds to reveal patterns across petal and sepal measurements. Circles are colored by species (setosa, versicolor, virginica) and sized according to sepal dimensions. Built with d3.js v6, it demonstrates a modular `scatterPlot` function using `scaleLinear`, `axisLeft`, `axisBottom`, and SVG circle elements, with data fetched from a GitHub Gist. The animation uses `setInterval` to update the plot, while axes and marks redraw dynamically.

Nnikhilagopi
91% match
Loading thumbnail…

Reusable Scatter plot

This animated scatter plot visualizes the Iris dataset, showing relationships between petal and sepal measurements, with points colored by species (setosa, versicolor, virginica). The visualization cycles through different attribute pairs on the axes every two seconds, dynamically updating via a reusable chart component. Built with D3.js v6, it uses scaleLinear for axis scaling, axisLeft and axisBottom for ticks, and SVG circles for marks. The code imports scatterPlot, a custom reusable function following the Towards Reusable Charts pattern, with data loaded via d3.csv.

SSnigdha6698
90% match
Loading thumbnail…

Reusable _scatter_Plot

This animated scatter plot visualizes the Iris dataset, encoding petal and sepal measurements along the axes with each species represented by a distinct color. The visualization cycles through different x-axis variables every two seconds using `setInterval`, demonstrating the reusable nature of the chart component. Built with D3.js, the example uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to construct axes, while SVG circles represent data points with CSS styling from the Share Tech font. The code includes a legend and axis labels to support interpretation of the three iris species.

AAmanullah007
90% match
Loading thumbnail…

Scatter

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length for each sample. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render the axes and circles. The SVG is dynamically sized to the window, and the plot is encapsulated in a custom `scatterPlot` function with configurable margins, radius, and accessor functions. The code also includes commented-out code for cycling through different variables, and a custom Share Tech font styles the text.

AAlpineStranger
90% match