Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot - 11641166

✓ Published0🌍 Public
JJasvitha Allamsetty
Last edited Mar 25, 2023
Created on Mar 25, 2023

This interactive scatter plot displays the Iris dataset, mapping petal width against sepal length. A reusable chart component built with `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisLeft` renders colored, shape-coded markers for the three species. The visualization animates every two seconds, cycling through all four numeric columns as the x-axis variable, updating the plot via the `scatterPlot` function's chained setters. The SVG output includes a title and a legend identifying species colors.

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 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
96% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing petal width against sepal length with points colored by species. Built with D3 v6, the visualization cycles through different variable pairings every two seconds using a reusable chart pattern. The SVG marks use the `d3.scaleLinear` and `d3.scaleOrdinal` APIs, with axes generated by `axisBottom` and `axisLeft`. A legend identifies the three species, while a `setInterval` loop updates the x and y value functions to animate through the dataset’s four numeric columns.

MMar-99
96% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length against petal width. The reusable chart component updates every two seconds, cycling through different x-axis columns to reveal patterns across all four flower measurements. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and data joins to render SVG circles. Each species appears as a distinct cluster, with axes and tooltips drawn from the `scatterPlot` factory function.

Mmukundakrishna.r@gmail.com
95% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot explores the Iris dataset, visualizing relationships between petal and sepal measurements across three flower species. The visualization cycles through different variable pairings every two seconds, updating the axes and point positions accordingly. Built with reusable D3 components, it leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `extent` from D3 6.7.0, using SVG rendering with animated transitions and a color-coded legend for species identification.

MMar-99
95% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

Animated scatter plot of the Iris dataset built with D3.js, showing petal measurements on the axes. The visualization cycles through four different column combinations (petal width, sepal width, petal length, sepal length) every two seconds, updating the x and y axes via a reusable `scatterPlot()` component. Circles are colored by species using `d3.scaleOrdinal`, with SVG rendering, axes from `axisLeft` and `axisBottom`, and a legend appended. Data loads from a CSV URL, and the plot uses `selectAll`, `join`, and `setInterval` to animate transitions.

AArefa Patwary
95% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization presents the Iris Dataset as an animated scatter plot, where each flower species appears as a distinct symbol (circle, star, or triangle) colored purple, blue, or green. The plot automatically cycles through different x-axis variables every two seconds, switching between petal width, sepal width, petal length, and sepal length, while keeping sepal length on the y-axis. Built with D3 v6, the reusable scatter plot component uses `scaleLinear` for axes, `scaleOrdinal` for categorical mapping, and `symbol` for custom shape rendering, with a legend displayed in the corner.

Ggeethikal
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

The visualization displays the Iris dataset as a scatter plot, mapping petal width against sepal length for each specimen. The plot is built using the D3 library's scaleLinear, extent, and axis functions. The visualization is rendered as an animated SVG, cycling through all four data columns as the X-axis every two seconds. This reusable chart, created with a custom scatterPlot component, demonstrates the flexibility of D3's functional programming approach for data binding and layout.

Ssiddu7147
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length while color- and shape-encoding species. Built with reusable D3 chart patterns, it uses `scaleOrdinal` and `symbol` for categorical encoding. Every two seconds, the animation cycles the x-axis through different numeric columns. The chart renders as SVG with `axisLeft` and `axisBottom` scales, and a custom legend distinguishes Setosa, virginica, and versicolor.

CCH SAMPATH
94% match