Skip to main content
SimilarExport ZIP
100%

Activity 8_task1

✓ Published0🌍 Public
Mmandadi1999
Last edited Jul 17, 2023
Created on Jul 17, 2023

This animated scatter plot visualizes the Iris flower dataset, showing relationships between sepal and petal measurements with color-coded species (setosa, versicolor, virginica). The visualization cycles through four variable combinations on the x-axis every few seconds using `setInterval`, while the y-axis displays petal width. Built with D3.js v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, with SVG circles for data points. The code creates a reusable scatter plot module and renders an interactive legend with custom colors and rotating axis labels.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

activity 8_task 1

This interactive scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements across three species color-coded as skyblue, lightgreen, and orange. The chart cycles through different x-axis dimensions every few seconds using setInterval, updating both axes and data points. Built with D3 v6, the visualization uses scaleLinear for axis scaling, axisBottom and axisLeft for tick rendering, and a reusable scatterPlot function that accepts configurable width, height, data, and margin parameters. SVG circles represent individual flowers, with a legend and axis labels styled via CSS.

KKeerthiAnnem
94% match
Loading thumbnail…

Activity 8 Task 1

This animated scatter plot explores the Iris dataset, cycling through four different x-axis features (petal width, sepal width, petal length, sepal length) while the y-axis remains fixed on sepal length. Data points are colored by species (setosa, versicolor, virginica), with a legend and dynamic axes updating on a timer. The visualization is built with D3.js (v6.7.0), using the `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` utilities. It renders as an SVG with HTML/CSS styling, refreshing the plot at set intervals via `setInterval`.

Ssreekarthanda@gmail.com
93% match
Loading thumbnail…

Activity - 7_task - 1

This animated scatter plot explores the Iris flower dataset, cycling through different feature pairings on the x-axis to reveal relationships between sepal and petal measurements. Points are colored by species (setosa, versicolor, virginica) and positioned using D3.js scales and axes from the `d3` library. The visualization updates every few seconds, re-rendering the plot with a new attribute on the horizontal axis while keeping the vertical axis fixed, allowing comparison across dimensions. The code uses D3’s `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the reusable scatter plot, with an SVG canvas and custom legend.

Mmalisettisaisumanth@gmail.com
93% match
Loading thumbnail…

Activity-9_Task-1

This interactive scatter plot visualizes the Iris dataset, cycling through different flower measurements on the x-axis with animation. The visualization uses D3.js methods including `csv`, `scaleLinear`, and `axisBottom` to render the points, while a `setInterval` function toggles between petal width, sepal width, petal length, and sepal length columns. Species are distinguished by color—skyblue, lightgreen, and orange—with a legend displaying labels. The SVG rendering includes custom styling and animated transitions as axes update automatically.

Hharipadmavathim2023@gmail.com
93% match
Loading thumbnail…

Activity-9_Task-1

This animated scatter plot displays the Iris dataset, cycling through four feature pairings (petal width, sepal width, petal length, and sepal length) on the x-axis while keeping sepal length on the y-axis. Colored circles represent the three iris species (setosa, versicolor, virginica) with a fixed legend. Built with D3.js, it uses `csv` for data loading, `d3.scaleLinear` for scaling, and `d3.axisLeft`/`d3.axisBottom` for axes, with a `setInterval` loop updating the x-value accessor to animate transitions. SVG rendering displays the full-screen plot with custom labels.

Ttharunramula@gmail.com
93% match
Loading thumbnail…

Activity 8_Task_1

This animated scatterplot cycles through four Iris flower measurements, using petal width on the x-axis and sepal length on the y-axis, with points colored by species. It is built with D3 and uses the `csv` loader to fetch the Iris dataset, then repeatedly updates the plot’s x-value via `setInterval`. Each frame, the axes and labels redraw, while a custom legend and title remain static. The code leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to handle scaling and axis rendering.

Ssaipaidipalli
93% match
Loading thumbnail…

Activity 9 tutorial1

This animated scatter plot visualizes the Iris dataset, cycling through different combinations of sepal and petal measurements on the x-axis while maintaining petal width on the y-axis. The visualization uses D3.js (v6.7.0) with custom scaling and axis functions from the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. Species are color-coded via a marker function mapping setosa, versicolor, and virginica to distinct colors. The plot includes a rotating axis label, a legend with colored points, and updates every few seconds to show different variable pairings. The title and axis labels are rendered using SVG text elements with custom styling.

Cchinnivikramnunna@gmail.com
93% match
Loading thumbnail…

Activity-9_Task-1

This animated scatter plot cycles through four Iris flower measurements, showing how petal width, sepal width, petal length, and sepal length correlate on the x-axis against petal width on the y-axis. The visualization uses D3 v6 to load CSV data from a GitHub gist and render circles colored by species (setosa, versicolor, virginica). A setInterval callback updates the x-value mapping and re-renders the axes and circles, while custom legends, labels, and a title are drawn with SVG elements. The reusable scatterPlot module uses scaleLinear, axisLeft, and axisBottom to construct the chart.

Hharipadmavathim2023@gmail.com
92% match