Skip to main content
SimilarExport ZIP
100%

Fork of Reusable Scatter plot

✓ Published0🌍 Public
TTulluripallavi
Last edited Mar 27, 2022
Created on Mar 27, 2022

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`.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Scatter Plot

A scatter plot of the Iris dataset shows petal length against sepal length for three flower species, with each species color-coded in green, indigo, or red. Users click through animated transitions that rotate the x-axis among four measured variables every two seconds, using D3 scales, axes, and circle elements. The visualization also renders an additional set of circles with rectangular corner radii based on sepal measurements, and loads data asynchronously via D3’s `csv` parser.

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

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through different x-axis variables from the Iris dataset, allowing viewers to compare petal width, sepal width, petal length, and sepal length against a fixed y-axis of sepal length. Data points are color-coded by species (setosa, versicolor, virginica) with a custom legend. The visualization uses D3 v6 APIs including `csv` for data loading, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll().join()` for SVG circle rendering. A `setInterval` timer updates the x-value accessor, and `scatterPlot` encapsulates the reusable chart logic.

SSurikanti Swathi
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width and length while coloring data points by species (setosa, versicolor, virginica) using a custom marker function. The visualization cycles through four variable pairings every two seconds via `setInterval`, updating axes and circle positions. Built with D3 v6, it employs `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` to render SVG circles dynamically. Overlaid text labels identify the current axes, while the reusable `scatterPlot` module handles margins, scales, and axis generation for each update.

TTulluripallavi
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through the Iris dataset, visualizing sepal and petal measurements across four dimensions. It uses the D3 v6 library to render circles via SVG, with a reusable `scatterPlot()` chart factory that updates scales and axes as the x-axis variable changes every few seconds. Each flower species is color-coded—red, violet, or orange—and labels are added dynamically. The datastream comes from a CSV file parsed with `d3.csv`, while `scaleLinear`, `axisLeft`, and `axisBottom` handle the coordinate system.

JJasvitha Allamsetty
94% match
Loading thumbnail…

Fork of Reusable Scatter plot

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.

Sshraehithareddy@gmail.com
94% match
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
93% match