Fork of Reusable D3 Scatter Plot

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different flower measurements (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds. The visualization is created with D3 and follows a reusable chart pattern, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from the `d3` library. It renders as an SVG, with circles positioned by the current x and y value scales, and axes that update on each interval.

JJyothicherukuri

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

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and updates circle positions via a reusable `scatterPlot` function with a `setInterval` loop. The animation transitions the x-value accessor to reveal different feature relationships, with all rendering done in SVG within a full-screen viewport.

Sshailajat1998@gmail.com

Fork of Reusable D3 Scatter Plot

Sshailajat1998@gmail.com

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, cycling through four flower measurements—petal width, sepal width, petal length, and sepal length—as the x-axis every two seconds while the y-axis remains fixed on sepal length. Built with D3 v6, the code uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scatterPlot()` to render SVG circles with animated transitions. Data is loaded via `d3.csv` from a GitHub Gist, and the plot updates in place by re-calling the chart function with new `xValue` accessors.

Tttummala17

Fork of Reusable D3 Scatter Plot

Tttummala17

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling every two seconds through four different variable pairs on the x-axis (petal width, sepal width, petal length, sepal length) while keeping sepal length on the y-axis. Built as a reusable D3.js chart function, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and animated circle transitions via `svg.call(plot)`. The animation iterates through columns using `setInterval`, updating scales and marks dynamically within a full-screen SVG.

BBHUMIKA CHUNDU

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, cycling through four numerical attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. It uses D3.js v6 with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, and updates the visualization by re-calling the chart function. The plot renders as SVG circles with animated transitions, and the code dynamically binds new data values to update the x-scale domain and circle positions, showcasing a modular chart pattern for interactive data exploration.

Sshailajat1998@gmail.com