ice7

100%

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

Forked from ice - 7

This animated scatter plot cycles through four different column pairings of the Iris dataset every two seconds, with each species represented by a distinct color (red, black, or blue). Built with D3 v6, it uses reusable chart functions like `scatterPlot()` with `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles and axes. The data is loaded asynchronously via `d3.csv` from a GitHub gist, while `setInterval` drives the rotation of x-axis variables.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ice

This animated scatter plot cycles through different visualizations of the Iris dataset, shifting the x-axis to display different flower measurements every two seconds. The reusable chart component, built with d3.scaleLinear, d3.axisLeft, and d3.axisBottom, renders colored circles representing three species. The animation uses setInterval to call scatterPlot with new parameters, while font styling comes from the Share Tech typeface. Data is loaded from a GitHub-hosted CSV.

Ppreethamkesa

92% match

Loading thumbnail…

ice - 7

This animated scatter plot visualizes the Iris dataset, cycling through different feature pairs every two seconds. Each point represents a flower sample, colored by species (setosa, versicolor, or virginica) and positioned using d3’s `scaleLinear` and `extent` for axes. The reusable `scatterPlot` function, imported from a separate module, renders axes via `axisLeft` and `axisBottom`. The SVG is constructed with d3 selections, and the animation uses `setInterval` to update the x-value mapping. Data is loaded as CSV from a GitHub gist, and the plot’s axes are labeled as “X-AXIS” and “Y-AXIS.”

Ssri7harsha

92% match

Loading thumbnail…

ICE 7

This animated scatter plot cycles through four different pairings of the Iris dataset’s numeric columns, using a reusable charting API built with D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The SVG visualization updates every two seconds, re-mapping the x-axis to a new attribute while keeping the y-axis fixed. The code defines a configurable `scatterPlot` function with setters for data, dimensions, and value accessors, then applies it repeatedly to a full-window canvas with a custom font.

Bbhargavarathod

91% match

Loading thumbnail…

ICE 7

This animated scatter plot cycles through the four numeric dimensions of the Iris dataset, changing the x-axis attribute every two seconds while keeping sepal length fixed on the y-axis. It uses d3's `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for tick marks, and the `join` operator for idempotent SVG circle updates. Data loads via `d3.csv`, and the plot resizes to the browser window.

Vvineeth-001

91% match

Loading thumbnail…

ice - 7

This animated scatter plot visualizes the Iris Dataset, cycling through different pairings of sepal and petal measurements every two seconds. The visualization uses D3.js version 6.7.0, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the chart, with species color-coded as red, blue, or grey. Rendered as an SVG, the plot updates dynamically by changing the x-axis variable through a `setInterval` loop, while the reusable `scatterPlot` chart component handles the layout and axis rendering.

SSaikiran2029

91% match

Loading thumbnail…

ICE7

An animated scatter plot cycles through four Iris dataset variable pairs every two seconds, revealing different correlations between measurements. Each circle represents a flower sample, with axes rescaling to the current variable selection. The reusable chart module updates its x-value accessor while preserving the same SVG rendering. D3's `scaleLinear`, `axisLeft`, `axisBottom`, and data joins create the idempotent visualization, with `setInterval` driving the sequential column switching.

Ppeesarie

91% match

Loading thumbnail…

ice7

An animated scatter plot cycles through the four numeric variables of Fisher's Iris dataset, changing the x-axis attribute every few seconds while the y-axis remains sepal length. Data points are encoded as ellipses, with width and height proportional to sepal width and petal length, and colored by species. The d3.js library constructs the plot, axes, and legend, while SVG `circle` elements with `rx` and `ry` attributes render the markers.

Bbhargavarathod

90% match

Loading thumbnail…

ICE 7

This animated scatter plot cycles through four pairings of Iris dataset measurements every second, revealing clusters of the three iris species. Built with D3 v6, the visualization uses a custom reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom`, while species are color-coded green, blue, and red. Animated via `setInterval`, the SVG updates the x-axis mapping across petal width, sepal width, petal length, and sepal length, with the initial view plotting petal width against sepal length.

DDaniel Mata

90% match