Fork of ICE-7 Assignment

100%

Fork of ICE-7 Assignment

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This visualization is an animated scatter plot of the Iris flower dataset, colored by species (setosa, versicolor, and virginica). It cycles through different combinations of sepal and petal measurements every two seconds, allowing viewers to see how the data clusters shift across various dimensions. Built with D3.js (version 6.7.0), the plot uses a reusable `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, and `axisBottom` for scaling and axes. The SVG circles are rendered with inline styling, using a `setInterval` loop to update the x-axis mapping and redraw the plot.

SSravyaAnnadi

93% match

Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length, with each point colored by species (setosa, versicolor, or virginica). It cycles through four attribute combinations every two seconds using `setInterval`, updating the x-axis scale via D3's `scaleLinear` and `axisBottom`. The visualization is built with a reusable `scatterPlot` function, leveraging D3 v6 modules like `csv`, `select`, and `extent`, rendered as SVG circles with custom fill colors and axis labels.

SSharmilaChowdhari

93% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through four measured features (petal width, sepal width, petal length, and sepal length) every two seconds. The visualization colors each data point by species—blue for setosa, red for versicolor, and yellow for virginica—using D3.js v6. It demonstrates a reusable scatter plot component built with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, updating the x-axis domain and circle positions via `setInterval`. The SVG rendering includes styled axes and white-stroked circles on a black background.

SSaiSreya1

93% match

Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal length and sepal length on the x- and y-axes while coloring each circle by species (setosa, versicolor, virginica). Using D3 v6 APIs such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, it implements a reusable scatter plot function. Every two seconds, a `setInterval` cycles through different columns—petal_width, sepal_width, petal_length, sepal_length—switching the x-axis dimension and updating SVG circles via data joins.

Ssumitradevipolina

93% match

Loading thumbnail…

Fork of ICE-7 Assignment Venkata Rajashekar Reddy

This animated scatter plot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—as the x-axis variable every two seconds, while sepal length remains fixed on the y-axis. Each data point is color-coded by species (setosa, versicolor, or virginica) using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and circles. The visualization uses D3 v6 with an SVG rendering and updates the plot in-place via `setInterval` and a custom `scatterPlot` module, drawing from a remote CSV dataset.

MManohar Kowthavarapu

93% match

Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species (green for setosa, indigo for versicolor, red for virginica). The visualization cycles through different column pairings every two seconds, animating the axes and point positions across four variable combinations. Built with D3 v6, the example uses a reusable scatterPlot module that employs scaleLinear, extent, axisLeft, and axisBottom to render the SVG chart, with circles encoded with both x/y positions and rx/ry attributes for elliptical shapes.

SSravyaAnnadi

92% match

Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis while displaying sepal length on the y-axis. The visualization updates every few seconds using `setInterval`, transitioning between petal width, sepal width, petal length, and sepal length measurements. Circles are colored by species (setosa, versicolor, virginica) using distinct colors, with a legend showing species labels. The code uses D3 v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, `csv` for data loading, and `join` for circle creation, with SVG rendering and animation. The reusable chart pattern follows Mike Bostock's "Towards Reusable Charts" approach.

JJustin Roberts

92% match

Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This scatter plot visualizes the Iris dataset, cycling through different measurement pairs on the x-axis to compare sepal and petal dimensions. It uses D3 v6 to render SVG circles, with colors encoded by iris species and a reusable chart module (scatterPlot) that handles axes and scales. The visualization updates automatically every few seconds, rotating through petal width, sepal width, petal length, and sepal length, while a legend maps species to colors. The code integrates D3 APIs like `scaleLinear`, `axisLeft`, and `axisBottom` to generate the axes and scales.

Vvinodreddysagam929@gmail.com

92% match