Skip to main content
SimilarExport ZIP
100%

Sriram ICE 7

✓ Published0🌍 Public
SSriram-Voruganti
Last edited Mar 10, 2023
Created on Mar 10, 2023

This interactive scatter plot visualizes the Iris dataset, displaying points with adjustable x-axis mappings that cycle through petal width, sepal width, petal length, and sepal length every second while the y-axis remains fixed on sepal length. Built with d3.js, the visualization uses scaleLinear, extent, axisLeft, axisBottom, and a reusable chart function pattern. The SVG animation transitions between different attribute combinations, with points rendered as circles and axes updating dynamically. The dataset is loaded from a GitHub Gist URL using d3.csv, and the plot resizes to fit the full browser window.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

sriram scatter plot ice 7

This D3.js scatter plot visualizes the Iris dataset, mapping sepal length on the y-axis and petal width on the x-axis. Different iris species are encoded using distinct symbols from D3’s `symbols` palette. The visualization uses `scaleLinear` and `scaleOrdinal` for positioning and symbol assignment, with axes generated via `axisLeft` and `axisBottom`. SVG rendering is fully responsive to the browser window, updating dimensions dynamically.

SSriram-Voruganti
92% match
Loading thumbnail…

Reusable Scatter Plot- ICE 7 (Data Visualization)

This interactive scatter plot visualizes the Iris dataset, using petal width and sepal length as axes while coloring each point by species (setosa, versicolor, or virginica). The visualization cycles through different column combinations every two seconds, animating the axes and points. Built with D3.js, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG axes, while a custom `scatterPlot` function manages the reusable chart configuration. The code loads CSV data asynchronously and renders colored circles with dynamic radius values based on sepal dimensions.

SSrilekha24
88% match
Loading thumbnail…

ICE7-11540639-Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length, petal width, sepal length, and sepal width, with each species color-coded (setosa as orangered, versicolor as green, and virginica as navy). The visualization uses D3.js (v6.7.0) with a reusable scatter plot component, loading data via `csv()`, and rendering SVG circles with animated transitions. Every two seconds, the plot cycles through different axis columns using `setInterval()` and reassigns the x-axis value, causing the scatter plot to dynamically update its layout while the y-axis remains fixed to sepal length.

SSravanthi Silla
88% 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
88% match
Loading thumbnail…

ICE-7

This interactive scatter plot visualizes the Iris Dataset, cycling through different feature pairings (petal width, sepal width, petal length, and sepal length) every two seconds. Built with D3.js, it uses a reusable scatter plot module with `scaleLinear` for axes, `extent` for data domains, and `axisLeft`/`axisBottom` for tick marks, rendered as animated SVG in a full-browser view.

Ssowmyanagula@my.unt.edu
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
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
87% match
Loading thumbnail…

Ice7-1

This interactive scatter plot visualizes the Iris dataset, plotting sepal length against petal width with colored points for each iris species. Every two seconds, the x-axis switches between the four numeric measurements (petal width, sepal width, petal length, sepal length), animating the data through successive views. The chart uses a reusable scatterPlot function built with D3 v6, employing scaleLinear for axes, extent for domains, and axisLeft/axisBottom for grid lines. The SVG renders circles with a fixed radius, while setInterval triggers re-renders with updated xValue mappings.

SSheela2930
87% match