Sreekar ICE7

100%

✓ Published0🌍 Public

Last edited Mar 29, 2022

Created on Mar 29, 2022

This animated scatter plot explores the classic Iris dataset, cycling through four feature pairings every two seconds. The visualization colors each species differently—setosa in green, versicolor in indigo, and virginica in red—using D3’s `selectAll` and `.join` to update SVG circles smoothly. The chart is rendered via a custom `scatterPlot` module that leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes and scaling, while the interval-based animation shifts the x-axis mapping between petal and sepal measurements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sreekar Ice 7

This animated scatter plot visualizes the classic Iris dataset, cycling through four different feature pairs on the x-axis (petal width, sepal width, petal length, and sepal length) every 1.5 seconds. Each point represents a flower, colored by species according to a categorical scale. The visualization uses D3.js’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs to construct the plot and its axes, while the `select` and `join` methods handle the SVG rendering. The data is loaded from a remote CSV via `d3.csv`.

SSreekarveeravelly

94% match

Loading thumbnail…

Sreekar Ice 7

This animated scatter plot cycles through four Iris flower measurements (petal width, sepal width, petal length, sepal length) every two seconds, using D3 scales and axes to map each feature pair. The SVG circles are colored by species (setosa in yellow, versicolor in blue, virginica in green) and use irregular radii from sepal measurements, though the animation primarily shifts axis domains. Data is loaded as CSV from a GitHub gist, with the scatterPlot module handling axis generation via d3.axisLeft and d3.axisBottom, while a setInterval drives the rotating variable selection.

SSreekarveeravelly

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

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

89% match

Loading thumbnail…

ICE7

This example visualizes the Iris dataset using a reusable scatter plot built with D3.js. It animates through different numeric attribute pairings on the x-axis every two seconds, while color-coded circles represent the three iris species—setosa, versicolor, and virginica—in yellow, purple, and green. The plot uses D3 scales, axes, and data joins to render SVG circles, with each mark’s size and position driven by sepal and petal measurements. The code includes a custom scatterPlot factory function to manage margins, scales, and axis updates.

Ssowmyanagula@my.unt.edu

89% match

Loading thumbnail…

ICE-7 Resuable scatter plot

This interactive scatter plot animates the Iris dataset, cycling through combinations of petal and sepal measurements every two seconds. It uses D3.js to render a full-screen SVG with animated transitions, using the `scatterPlot` reusable module to handle axes and circle positioning. Each point is colored by species—setosa in red, versicolor in pink, and virginica in green—based on the `species` field. The visualization demonstrates a reusable scatter plot component that can dynamically update its x and y axes.

Cchandrakalavanukuri

88% match

Loading thumbnail…

Fork of ICE-7 Assignment

This animated scatter plot visualizes the Iris dataset, cycling through four different feature pairs on the x-axis while mapping petal width to the y-axis. Each data point is colored by species (setosa, versicolor, virginica), with a legend and axis labels updating dynamically. The visualization uses D3.js v6, leveraging `scaleLinear`, `axisLeft`, `axisBottom`, `csv`, and `select`, with a reusable `scatterPlot` module following the Towards Reusable Charts pattern. Circles are rendered via SVG, and a `setInterval` drives the animation, switching columns and updating the plot every few seconds.

MManohar Kowthavarapu

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

88% match