KR_DV_ICE_7_1

100%

✓ Published0🌍 Public

KkarthikRachamalli1995

Last edited Mar 11, 2023

Created on Mar 10, 2023

This example displays the Iris dataset as an animated scatter plot that cycles through different x-axis variables every three seconds. The plot maps petal width to the y-axis while alternating between sepal width, petal length, and sepal length on the x-axis. Species are encoded using distinct SVG symbols—stars, crosses, and diamonds—generated with d3.symbol. The reusable chart function leverages d3.scaleLinear, axisLeft, and axisBottom for scales and axes, with setInterval driving the periodic updates.

AI-generated description

Reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example shows the Iris Dataset as a scatter plot of petal width against sepal length, with each of the three species distinguished by color and a unique symbol shape. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal for mapping species to colors and shapes from d3.symbol, and d3.axisBottom and d3.axisLeft for ticks. Every ten seconds, the x-axis variable cycles through four measurements, animating the plot via a setInterval that updates the scatter plot’s xValue accessor and re-renders the SVG.

KKarnisrikanth

88% match

Loading thumbnail…

ice - 7

This animated scatter plot cycles through different x-axis variables from the Iris dataset, changing every two seconds to compare sepal and petal measurements. The visualization uses D3’s scaleLinear, axisBottom, and axisLeft APIs to render axes and circles colored by species, with the x-axis switching between petal_width, sepal_width, petal_length, and sepal_length. Rendering uses SVG animations driven by setInterval, and the dataset is loaded via d3.csv from a GitHub repository.

PPriyanka7002

88% match

Loading thumbnail…

ICE-7 Scatter plot

This D3.js example visualizes the Iris Dataset with an animated scatter plot that cycles through different numeric attributes every two seconds. The plot maps petal width and sepal length onto the x and y axes, using `d3.scaleLinear` for scaling and `axisLeft`/`axisBottom` for tick marks. Each point is rendered as an SVG circle with a fixed radius, and the axes update dynamically as the displayed column changes. The animation loops through petal width, sepal width, petal length, and sepal length, demonstrating how the data distribution shifts across dimensions.

Aabdhaseeeb

88% match

Loading thumbnail…

ICE7 - Scatter Plot

This interactive scatter plot animates through different x-axis variables—petal width, sepal width, petal length, and sepal length—while keeping sepal length on the y-axis, using the classic Iris dataset. Circles are colored by species (setosa, versicolor, virginica) with a custom legend, and the plot updates every few seconds via `setInterval`. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function, rendering as SVG with appended axis labels and a rotating title.

Aavinashchinta99

88% match

Loading thumbnail…

ICE 7 Reusable scatter plot

This reusable scatter plot visualizes the Iris Dataset, mapping petal width, sepal width, petal length, and sepal length onto the x-axis while keeping sepal length on the y-axis. It uses D3’s `scaleLinear`, `scaleOrdinal`, and `symbol` to encode species with distinct SVG path shapes. The plot cycles through the four x-axis variables every two seconds via `setInterval`, re-calling the chart with updated accessors. Rendering is fully SVG-based, with axes generated by `axisLeft` and `axisBottom`, and the viewport resizes to the full window dimensions.

SSai Kaushik

88% match

Loading thumbnail…

DV ICE-7

This interactive scatter plot visualizes the Iris dataset, displaying a point for each flower specimen. It uses petal width on the x-axis and sepal length on the y-axis, with colors representing species (versicolor in yellow, virginica in light blue, setosa in orange). The plot cycles through all four numeric columns every two seconds, updating the axes and point positions using D3 v6's `setInterval`, `scaleLinear`, `axisLeft`, and `axisBottom` functions. The SVG is rendered full-screen with custom text labels and styling defined in external CSS.

Ssowmyanagula@my.unt.edu

88% match

Loading thumbnail…

ICE 7.1

This interactive scatter plot displays the Iris dataset, encoding sepal and petal measurements as x and y coordinates. Points are differentiated by species using both color (via `d3.scaleOrdinal` with `schemeCategory10`) and shape (via `d3.symbol` with distinct symbol types). Every ten seconds, the x-axis automatically switches among four measurement columns—petal width, sepal width, petal length, and sepal length—updating the chart through a custom `scatterPlot` function. The SVG is rendered with D3 v6, using `csv` to load data and `axisLeft` and `axisBottom` for dynamic axes.

Kkartik900

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

88% match