Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 20, 2023

This animated scatter plot visualizes the Iris Dataset, showing how petal and sepal measurements relate across three flower species. It cycles through four variable combinations on the x-axis every few seconds while displaying petal width on the y-axis. The visualization uses D3 v6 functions like `scaleLinear`, `axisLeft`, and `axisBottom`, with SVG symbols for data points and a color-coded legend. Each species is represented by a distinct shape and color, with the chart updating 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 D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length for three flower species. The visualization cycles through different variable pairings every two seconds, rotating among petal_width, sepal_width, petal_length, and sepal_length on the x-axis. Built with D3 v6, the example uses `scaleLinear` and `scaleOrdinal` for axes and color encoding, with circles rendered as SVG elements. Data loads from a GitHub Gist CSV, and the reusable `scatterPlot` function updates axes and marks dynamically through a `setInterval` loop.

KKeerthipriyaBankuru

96% 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

95% 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

95% 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

95% 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

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different feature pairs to reveal relationships among species. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to positions and render axes. A `setInterval` triggers updates every two seconds, switching the x-axis variable among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. The chart renders as SVG with circles for each data point, adapting to the full window size.

Ssuguna428

94% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, encoding petal and sepal measurements for three flower species. The D3.js (v6.7.0) visualization cycles through four column combinations on the x-axis while the y-axis remains fixed, animating the points with each interval. A legend identifies species by color (green for setosa, orange for versicolor, blue for virginica). The implementation uses reusable scatter plot logic from `scatterPlot.js` with `scaleLinear`, `axisLeft`, and `axisBottom`, while `index.js` handles data parsing, marker styling, and dynamic axis updates.

Cchandanagandla

94% 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

94% match