Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published1🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

This animated scatter plot cycles through the four Iris dataset features on the x-axis while the y-axis displays sepal length. Data points are colored by species: green for setosa, yellow for versicolor, and blue for virginica, with a corresponding legend. Built with D3 v6, the visualization uses the `scaleLinear`, `axisLeft`, and `axisBottom` APIs from the `d3` module within a reusable `scatterPlot` function. The SVG output updates at intervals, redrawing axes and labels to reflect the changing feature selection.

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 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 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 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 D3 Scatter Plot

This animated scatter plot explores the Iris dataset, cycling through different pairings of sepal and petal measurements every two seconds. It uses D3 v6's `scaleLinear`, `scaleOrdinal`, and axis components within a reusable `scatterPlot` function, rendering SVG circles with color-coded species. The visualization also includes a legend and a secondary set of static, elliptical marks, demonstrating data-driven attribute binding.

SSaiSreya1

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four attribute pairings every two seconds to reveal different relationships between sepal and petal measurements. Built with D3 v6, it uses d3.scaleLinear for axes, d3.scaleOrdinal for species color coding, and d3.axisLeft/axisBottom for ticks. SVG circles are rendered with CSS transitions, while a legend identifies the three iris species. The implementation follows the reusable chart pattern, with the scatterPlot function accepting configurable accessors for x, y, and radius values.

AAnanyaSamala

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris dataset as an animated scatter plot, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis every two seconds while sepal length stays on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data, and a reusable `scatterPlot` function that updates the circles and axes via SVG selections. The animation runs through `setInterval`, redrawing the plot with a new x-value accessor each cycle.

GGogineni44

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization is an animated scatter plot of the Iris dataset, cycling through four different measurement pairs on the x-axis while the y-axis remains fixed to sepal length. It uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom`. The code renders circles and text via SVG and updates the plot every few seconds using `setInterval`. Colors map to iris species, and a custom legend with labeled circles is drawn outside the main plot, alongside axis titles that change depending on the current x-axis variable.

Vviswak12

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows an interactive scatter plot of the Iris dataset, where the x-axis cycles through four numeric columns (petal width, sepal width, petal length, sepal length) every 1.5 seconds, while the y-axis stays fixed to sepal length. Each point is colored by species using a d3.scaleOrdinal with a viridis-like palette, and a static legend identifies the three species. Built with D3 v6, the visualization uses d3.csv to load data, d3.scaleLinear and axisLeft/axisBottom for axes, and a reusable scatterPlot function that updates circle positions and axis labels on each interval.

RRavi Teja Bonam

93% match