Skip to main content
SimilarExport ZIP
100%

Fbb

✓ Published0🌍 Public
TTarun Kumar Bosupally
Last edited Mar 28, 2024
Created on Mar 28, 2024

This animated scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the axes while encoding species with distinct D3 symbols. A reusable chart factory manages scales, axes, and marks, with the x-axis cycling through four measurement columns every 15 seconds. Built with D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisBottom`, the SVG rendering animates smoothly as data attributes change.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

F

This animated scatterplot cycles through the four numeric measurements of the Iris dataset, rotating which feature is mapped to the x-axis while sepal length stays on the y-axis. Each species is color-coded (orange, blue, black) with fixed circular marks, and the D3 code uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes. A `setInterval` updates the x-value accessor every few seconds, and the SVG rendering includes a manual legend and dynamic axis labels.

Ppreethamkesa
87% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length and using different symbols and colors to distinguish the three species. Built with a reusable D3 chart function, it employs `scaleLinear` for axes, `scaleOrdinal` for categorical symbol and color mappings, and SVG rendering. A legend identifies species, while an animation cycles through different x-axis variables every two seconds, dynamically updating the plot via the chart's accessor methods.

AAniv Chakravarty
86% match
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, encoding sepal length against petal width and differentiating species with distinct symbols. The x-axis cycles through four measured attributes every 15 seconds, animating the plot’s transitions. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, and `symbolGenerator` for SVG paths, with axes via `axisLeft` and `axisBottom`. The reusable chart pattern, inspired by Towards Reusable Charts, exposes accessor methods like `.xValue` and `.symbolValue` to configure the visualization.

DDeekshithVemula
85% match
Loading thumbnail…

Iris dataset scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping measurements like petal width and sepal length across three flower species. Using D3.js with an SVG rendering and animation, the chart automatically cycles through different x-axis variables every 15 seconds, updating the visualization via a reusable scatterPlot function. The code employs d3.scaleLinear for axes, d3.scaleOrdinal for symbol types, and d3.symbol to render distinct species markers, with data loaded asynchronously from a CSV source.

Ggayathrikavya
85% match
Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot displays the Iris dataset, cycling through four different x-axis dimensions (petal width, sepal width, petal length, and sepal length) every three seconds while keeping sepal length on the y-axis. Built with D3 v6, the visualization uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to smoothly animate the repositioning of circles over one second. The chart is rendered as an SVG with a full-viewport layout, and each data point is a circle with a radius of 5 pixels. The code follows a reusable chart pattern with configurable width, height, margins, and data accessors.

EEmma Schaale
85% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal and sepal measurements to x- and y-axes while coloring points by species (setosa, versicolor, virginica) in orange, purple, and pink. The visualization uses D3 v6 with a reusable `scatterPlot` module employing `scaleLinear`, `axisLeft`, and `axisBottom` for axes. A `setInterval` cycles through four measurement columns every two seconds, dynamically updating the x-axis mapping. The SVG rendering animates circles as the axis scales adjust, with labels for "Sepal Length" and "Petal Length" displayed in a green tech-themed font.

KKiran3295
85% match
Loading thumbnail…

D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal length and sepal width while coloring each point by species (setosa, versicolor, or virginica). The visualization cycles through four attribute combinations every two seconds using `setInterval`, updating the x-axis and circle positions accordingly. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with SVG circles rendered via `selectAll` and `join`. The code also includes manually appended axis labels and a custom color scheme.

RRaja Srinivas Nelluri
85% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal width against sepal length while coloring each dot by species (setosa, versicolor, and virginica). Built with D3 v3, it uses `d3.csv` to load data, `scaleLinear` for axes, and `setInterval` to cycle through different data columns every two seconds, updating the x-axis. The SVG rendering includes custom circle markers with varying dimensions and a rotating set of axis labels.

Bbhargavarathod
85% match