Skip to main content
SimilarExport ZIP
100%

Reusable Scatter plot Task 9 & 10

✓ Published0🌍 Public
PPothuguntla Pranitha
Last edited Apr 28, 2024
Created on Apr 28, 2024

Using the Iris dataset, this visualization presents an animated scatter plot where the x-axis cycles through sepal and petal measurements. Iris species are distinguished by colored points (skyblue, lightgreen, orange), with labels for margin, axis, and legend rendered via D3 selection methods. Built with reusable D3 module patterns, the plot updates its axis scales and positions every few seconds using `setInterval` and D3's `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The SVG graphics and smooth axis transitions demonstrate a dynamic, parameter-driven scatter plot example.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

task 9 and 10

This animated scatter plot displays the Iris dataset, cycling through four flower measurements on the x-axis while maintaining sepal length on the y-axis. Using D3.js, the visualization updates every few seconds via `setInterval`, re-rendering axes and circles with `scaleLinear`, `axisLeft`, and `axisBottom`. Each species is color-coded, with SVG shapes drawn from CSV data loaded via `d3.csv`. The reusable `scatterPlot` function handles the dynamic updates, while custom text elements provide labels, a legend, and a title.

Sskykarthik97@gmail.com
92% match
Loading thumbnail…

Task 9

This animated scatter plot visualizes the Iris dataset, cycling through different pairings of sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Data points are colored by species using custom marker logic, with a legend and axis labels updating dynamically. Built with D3 v6, the visualization uses `csv` for data loading, `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, and `setInterval` to rotate the x-axis variable, rendering as SVG with a custom reusable scatter plot module.

Cchintamanenithp@gmail.com
92% match
Loading thumbnail…

Task9&10

This animated scatter plot visualizes the Iris dataset, cycling the x-axis through petal width, sepal width, petal length, and sepal length while keeping petal width on the y-axis. Points are color-coded by species (setosa, versicolor, virginica) with a legend. Built with D3.js (v6), it uses `scaleLinear`, `axisLeft`, and `axisBottom` from the scatterPlot module, updating via `setInterval` to call the reusable plot function. The SVG rendering includes dynamic axis labels, a title, and legend elements, with data loaded from a remote CSV.

MMallikarjun Narra
92% match
Loading thumbnail…

Fork of Reusable Scatter plot Task9,10

This interactive scatter plot visualizes the Iris dataset, displaying petal and sepal measurements as colored circles representing different species. Using D3.js version 6, the visualization cycles through four different column combinations on the x-axis every few seconds via `setInterval`, while y-axis values remain fixed. The reusable `scatterPlot` module handles axis generation with `scaleLinear`, `axisLeft`, and `axisBottom`, while the main script adds circles, a color legend, and axis labels directly to the SVG. Styled with custom CSS and Google Fonts, the animation updates smoothly without transitions.

Sshraehithareddy@gmail.com
91% match
Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, displaying relationships between sepal and petal measurements. It cycles through different x-axis variables (petal width, sepal width, petal length, sepal length) in an animation, with each species point colored distinctly (skyblue, lightgreen, orange). The D3-based implementation loads data via `d3.csv`, uses a custom `scatterPlot` module that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the axes, and renders the animated transitions via `setInterval` and the `join` API for circles.

LLakshmanRangisetti
91% match
Loading thumbnail…

task9,10

This animated scatter plot explores the Iris dataset, cycling through different feature pairings on the x-axis while the y-axis remains fixed on sepal length. It shows data points colored by species (setosa, versicolor, virginica) with a legend and axis labels. Built with D3.js (v6.7.0), the visualization uses an SVG renderer and a `setInterval` to update the plot every few seconds. The reusable `scatterPlot` module leverages D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to generate axes and plot data from a remote CSV file.

Ppraneeth7222@gmail.com
91% match
Loading thumbnail…

Task9&10

This example presents an animated scatterplot of the Iris dataset, cycling through four different variable pairings on the x-axis while keeping petal width on the y-axis. Points are colored by species (setosa, versicolor, virginica) and rendered as ellipses using their sepal dimensions. The visualization uses D3 v6 via UNPKG, employing `scaleLinear`, `axisLeft`, and `axisBottom` from the scatterPlot module. A `setInterval` updates the x-value mapping every few seconds, while SVG elements like circles and text labels are dynamically joined and appended. Data loads from a CSV URL using `d3.csv`.

Mmdadeebfarhaan@gmail.com
91% match
Loading thumbnail…

Task9

This animated scatter plot displays the Iris flower dataset, cycling through different petal and sepal measurements on the x-axis while maintaining sepal width on the y-axis. D3.js v6 fetches the CSV data and renders SVG circles colored by species, with a reusable scatterPlot module using scaleLinear, axisBottom, and axisLeft. A setInterval updates the x-axis mapping every few seconds, while legend labels, colored circles, and axis titles are appended dynamically to the SVG.

Aamireddy.sw@gmail.com
91% match