ICE-7 Resuable scatter plot

100%

ICE-7 Resuable scatter plot

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

This interactive scatter plot animates through different pairings of Iris flower measurements, cycling between petal width, sepal width, petal length, and sepal length every two seconds. Circles representing individual flowers are colored by species—green for setosa, indigo for versicolor, and red for virginica—using D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs within a reusable `scatterPlot` module. The SVG visualization loads CSV data from a GitHub gist and updates axes and circle positions via `setInterval`, with all rendering handled by D3 selections and joins.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 7 Reusable Scatter Plot

This scatter plot animates through different pairings of Iris flower measurements, cycling every two seconds between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, the visualization uses a reusable `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with circles colored by species (setosa, versicolor, or virginica). Data comes from a CSV of the classic Iris dataset, and the transitions are driven by `setInterval` calling the plot function with new x-value accessors.

AArv1228

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

94% match

Loading thumbnail…

ICE-7 Reusable Scatter Plot

This interactive scatter plot animates through different pairings of Iris flower measurements, cycling between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. The visualization uses the D3.js library loaded via React, rendering points as SVG circles whose colors map to three Iris species. It incorporates a dynamic legend and axis labels that update with each animation frame, driven by D3's `setInterval` and the reusable `scatterPlot` function.

BBhanuMotupalli

94% match

Loading thumbnail…

ICE7_Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying relationships between petal and sepal measurements. The visualization cycles through four variable combinations every two seconds, allowing comparison of different attribute pairings. Each species—setosa, versicolor, and virginica—is distinguished by color, with a legend identifying the groups. The plot is built as a reusable D3 module, using `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` from the d3 library for axes and scales. SVG circles represent data points, with animated axis updates driven by `setInterval`.

AAkrutiKhurana2103

93% match

Loading thumbnail…

ICE-7 Resuable scatter plot

This animated scatter plot visualizes the Iris flower dataset, displaying different species as colored circles (green, indigo, and red) that cycle through various sepal and petal measurement axes every two seconds using D3.js. The visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.axisLeft/axisBottom for the coordinate system. A reusable scatterPlot function encapsulates the chart logic, while SVG circles with dynamic positioning and the setInterval timer drive the rotating axis combinations. The rendering is built with D3 v6.7.0, featuring a tech-style font and full-window responsive SVG layout.

LLG0498

93% match

Loading thumbnail…

ICE7 - Scatter Plot

This animated scatter plot visualizes the Iris flower dataset, cycling through four different measurements (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. Each species is color-coded—setosa in orange, versicolor in blue, and virginica in black—with a static legend and labeled axes. The visualization uses D3.js (v6.7.0) with its `scaleLinear`, `axisLeft`, and `axisBottom` APIs, loading data via `d3.csv` and updating positions on a timer with `setInterval`. Data comes from a GitHub-hosted medals CSV file, and the SVG rendering includes circles with custom radii per data point.

Aavinashchinta99

93% match

Loading thumbnail…

ICE 7 Reusable Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal and sepal measurements for three flower species (setosa, versicolor, and virginica) using color-coded circles. Built with D3 v6, the visualization cycles through different measurement combinations every 2 seconds using setInterval, updating the x-axis and scatter positions. The implementation uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and d3.axisLeft/d3.axisBottom for rendering axes in SVG. Data loads from a GitHub Gist CSV via d3.csv, with circles animated through D3's join pattern.

Vvegurusaiprathyusha

93% match

Loading thumbnail…

ICE-7 Scatterplot

This animated scatterplot visualizes the Iris Dataset, plotting petal width against sepal length with points colored by species (setosa, versicolor, virginica) in red, teal, and blue. Using D3.js, the visualization cycles through different column pairings every two seconds—including sepal width, petal length, and sepal length—via setInterval, dynamically updating the axes and circles without user interaction. The SVG rendering uses d3.scaleLinear, axisLeft, and axisBottom to construct the coordinate system.

BBaswa Sathvika Reddy

93% match