Skip to main content
SimilarExport ZIP
100%

Act 7_tutorial

✓ Published0🌍 Public
AAbhinavReddyKaripireddy@my.unt.edu
Last edited Apr 10, 2025
Created on Apr 10, 2025
Forked from Hello VizHub

This interactive scatter plot cycles through the Iris dataset's four numeric attributes on the x-axis, showing how petal and sepal measurements separate the three species by color. Built with d3.js 6.7.0, it uses a reusable `scatterPlot` module with `scaleLinear` and `axisBottom`/`axisLeft` for coordinate and axis construction, while a `setInterval` timer drives the automatic axis rotation. The animation renders as SVG with circles, a custom legend, and rotating axis labels, drawing data from a remote CSV file hosted on GitHub.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Act7-tutorial

This interactive scatter plot visualizes the Iris dataset, cycling through different sepal and petal measurements on the x-axis while displaying sepal length on the y-axis. The animation updates every few seconds using `setInterval`, changing the x-axis variable and re-rendering the SVG circles. Built with D3 v6, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and a reusable `scatterPlot` module. Points are colored by species—setosa, versicolor, and virginica—with a custom legend, axis labels, and title rendered as SVG text elements.

RRayabarapu Nikhitha
92% match
Loading thumbnail…

tutorial 7.1

This interactive scatter plot animates through different x-axis attributes of the Iris dataset, cycling between petal width, sepal width, petal length, and sepal length. The plot uses D3.js version 6.7.0 to render SVG circles colored by species, with a legend and axis labels that update dynamically. The animation repeatedly re-renders the chart with a new x-axis variable, while the y-axis remains fixed on petal length, using a `setInterval` loop and a modular array index. The data is fetched from a GitHub-hosted CSV file.

Ggoudrohit2000@gmail.com
92% match
Loading thumbnail…

Activity 7.1 Tutorial

This interactive scatterplot visualizes the Iris flower dataset, showing the relationships between petal and sepal measurements. It cycles through four variable combinations on the x-axis every few seconds, using color-coded circles for species. Built with D3.js (v6.7.0), it leverages modules like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create the plot. The animation sequences through different dimension pairs, with a legend, axis labels, and a title rendered as SVG. Data is loaded from a remote CSV file hosted on GitHub.

Ttarun.chintada46@gmail.com
91% match
Loading thumbnail…

activity 7 tutorial

This animated scatter plot visualizes the Iris flower dataset, cycling through different pairings of sepal and petal measurements on the x-axis every few seconds while petal width and sepal length remain on the y-axis. Data points are color-coded by species (setosa, versicolor, virginica) with a legend and rotating axis labels. Built with D3.js v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the plot dynamically. The SVG renders circles with custom fill colors and includes a reusable `scatterPlot` module for configuration.

Ssudheervnarasimha1@gmail.com
91% match
Loading thumbnail…

7.1-Tutorial1

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis to compare petal and sepal measurements across three species. The animation uses a `setInterval` loop to update the plot, while the scatter plot is constructed with D3's `scaleLinear` and `axisBottom`/`axisLeft` from the `d3` module via UNPKG. Data is loaded from a GitHub gist as CSV, and the SVG rendering includes a color-coded legend, axis labels, and a title.

Kkotasc18@gmail.com
91% match
Loading thumbnail…

activity7_tutorial

This animated scatter plot cycles through different Iris flower measurements, displaying petal width and sepal length on the axes while each species is colored distinctly. The visualization uses D3.js (v6) to load CSV data from a GitHub gist, render SVG circles and axes, and update the plot at intervals via `setInterval`. The code demonstrates a reusable `scatterPlot()` function with configurable scales and margins, alongside custom legend elements and axis labels.

Ggouthamigongidi2457@gmail.com
91% match
Loading thumbnail…

activity7.1_tutorial

This animated scatterplot cycles through different Iris flower measurements—petal width, sepal width, petal length, and sepal length—on the x-axis while plotting sepal length on the y-axis. Using D3.js v6, it loads the Iris dataset via `d3.csv`, renders circles colored by species, and updates axes through a `setInterval` loop. The code builds a reusable scatter plot component with `d3.scaleLinear`, `axisBottom`, and `axisLeft`, and includes a custom legend, title, and axis labels, all rendered as SVG with CSS styling.

Ssravani1969@gmail.com
91% match
Loading thumbnail…

Activity7.1_Tutorial

This animated scatter plot explores the Iris dataset, cycling through four different feature combinations on the x-axis to reveal relationships between sepal and petal measurements. Built with D3.js (version 6.7), the visualization uses an SVG canvas and a reusable `scatterPlot` function that handles axis scaling and circle placement. The code applies color coding by species (skyblue, lightgreen, orange) and includes a legend, axis labels, and a title. A `setInterval` timer sequentially updates the x-axis mapping to petal_width, sepal_width, petal_length, or sepal_length, while the y-axis remains fixed on sepal_length, demonstrating dynamic data exploration.

Vvidyagangasani@my.unt.edu
91% match