Skip to main content
SimilarExport ZIP
100%

Fork of Reusable Scatter plot

✓ Published0🌍 Public
Sshraehithareddy@gmail.com
Last edited Apr 29, 2024
Created on Apr 29, 2024

This interactive scatter plot displays the Iris dataset, cycling through different feature combinations on the x-axis (petal width, sepal width, petal length, and sepal length) while keeping petal width on the y-axis. It uses D3.js (v6) with a reusable `scatterPlot` module that leverages `scaleLinear`, `extent`, and axis functions. Points are color-coded by species via a custom marker function, and the visualization updates at intervals, featuring custom axis labels, a legend, and a title. Data is loaded from a remote CSV file, with SVG rendering and animation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, with points colored by species and animated to cycle through four feature combinations as the x-axis variable changes every few seconds. The visualization uses D3 v6 with a reusable scatterPlot module that relies on scaleLinear, axisLeft, and axisBottom to render SVG axes and circles. Data loads from a CSV via the d3.csv parser, while a setInterval drives the animation, updating the x-axis mapping between petal width, sepal width, petal length, and sepal length.

GGARIDIDEEKSHITHREDDY
95% 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
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, using petal width and sepal length as the x and y axes, with points colored by species (setosa, versicolor, virginica). The visualization is built with D3 v6, using the `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` APIs to render axes and a legend. A JavaScript `setInterval` cycles through four column pairings every two seconds, animating the plot to show different variable combinations while the SVG circles update smoothly. The data is loaded from a GitHub Gist CSV file and parsed into numeric fields.

SSheshidharreddy
94% match
Loading thumbnail…

Fork of Reusable Scatter plot

This animated scatter plot cycles through different Iris dataset attributes, mapping petal width, sepal width, petal length, and sepal length onto the x-axis while the y-axis displays sepal length. Each species is color-coded green, blue, or red. Built with D3.js, it uses `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` function, rendering SVG circles and updating axes every two seconds via `setInterval`.

TTulluripallavi
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and updates circle positions via a reusable `scatterPlot` function with a `setInterval` loop. The animation transitions the x-value accessor to reveal different feature relationships, with all rendering done in SVG within a full-screen viewport.

Sshailajat1998@gmail.com
93% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and updates circle positions via a reusable `scatterPlot` function with a `setInterval` loop. The animation transitions the x-value accessor to reveal different feature relationships, with all rendering done in SVG within a full-screen viewport.

Sshailajat1998@gmail.com
93% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) every few seconds while keeping sepal length on the y-axis. Data points are colored by species using a simple switch statement, with a color legend and axis labels updating dynamically. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom`, and is built as a reusable chart module. It renders as an SVG with a setInterval-driven animation that updates the chart’s x-value accessor.

Ddivyageethanjali
93% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot animates the Iris dataset by cycling the x-axis through petal width, sepal width, petal length, and sepal length every 1.5 seconds while keeping sepal length on the y-axis. It uses d3.csv to load data and d3.scaleOrdinal with a viridis palette to color points by species. The reusable d3.scatterPlot module leverages scaleLinear, axisLeft, and axisBottom for scales and axes, with SVG circles rendered and updated via selection calls. Legends and axis labels are appended manually, and the animation uses setInterval to reassign the xValue and refresh the plot.

Ggaddamthanmayeereddy759@gmail.com
93% match