Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 Assignment Venkata Rajashekar Reddy

✓ Published0🌍 Public
MManohar Kowthavarapu
Last edited Mar 30, 2023
Created on Mar 30, 2023

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.

AI-generated description
MIT Licensed

Similar vizzes

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
93% match
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 Resuable scatter plot

This animated scatter plot uses the Iris flower dataset to explore relationships between petal and sepal measurements. The code draws colored circles representing three species—green for setosa, indigo for versicolor, and red for virginica—using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. Every two seconds, a setInterval callback updates the x-axis mapping to cycle through petal_width, sepal_width, petal_length, and sepal_length, while the y-axis stays fixed on sepal_length. The visualization employs a reusable scatterPlot function that updates existing SVG circles and axes through data joins.

SSaiSreya1
92% 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
92% 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 Fork of iCE - 7 Reusable Scatter Plot

This scatter plot animates through four Iris flower measurements (petal width, sepal width, petal length, and sepal length) every two seconds, swapping which variable appears on the x-axis while keeping sepal length on the y-axis. Each point is colored by species (blue, red, or yellow) with white outlines, rendered as SVG circles. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll(...).join(...)` within a reusable `scatterPlot` module. Data comes from a CSV of the classic Iris dataset, loaded via `d3.csv`.

DDivyaVellanki
92% match
Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, plotting petal width against sepal length. It animates through all four numeric measurements by updating the x-axis every ten seconds, cycling through petal_width, sepal_width, petal_length, and sepal_length. The plot uses D3 v6's `scaleLinear`, `scaleOrdinal`, and `axisBottom` APIs to render SVG symbols, with distinct shapes and colors for each species. Data is loaded from a CSV file via `d3.csv`, and the visualization updates dynamically by re-calling the scatter plot function with new x-value mappings.

KKarnisrikanth
91% match
Loading thumbnail…

Fork of Reusable Scatter Plot- ICE 7

This animated scatter plot visualizes the Iris dataset, cycling through different sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Each species appears as a distinct color—orange, blue, and black—with a custom legend and labels. Built with D3 v6, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scales, and `setInterval` to cycle through measurement columns. Circles are rendered as SVG elements with custom `rx` and `ry` attributes, and axes are drawn using `axisLeft` and `axisBottom`.

Mmandalasaikrishna007
91% match