Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
NNaimisha-M
Last edited Jun 30, 2022
Created on Jun 30, 2022

This visualization demonstrates a reusable scatter plot displaying the Iris dataset, cycling through four attribute combinations every two seconds to compare petal and sepal measurements. Built with D3.js v6, the chart uses `scaleLinear` and `extent` for scales, `axisLeft` and `axisBottom` for axes, and SVG circles for data points. The code implements a reusable chart pattern with configurable accessors, and the animation transitions between different x-axis variables using `setInterval` while maintaining a fixed y-axis of sepal length. The implementation includes a custom font and full-window responsive sizing.

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

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the classic Iris dataset, displaying petal width against sepal length for each sample. The chart uses a reusable D3 module with a fluent interface, built on `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`axisBottom` for scaled axes. Rendered as an SVG, the visualization cycles through four different feature pairings every two seconds via `setInterval`, updating the x-axis and circle positions in place. The code leverages D3 6.7.0 and fetches the dataset from a GitHub Gist, with a custom "Share Tech" font applied to the axis labels.

NNaimisha-M
95% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris Dataset in a scatter plot that cycles through different attribute pairings every two seconds. Built with D3 v6, it uses reusable chart patterns where scales, axes, and circles are updated via selection joins. The animation rotates through petal width, sepal width, petal length, and sepal length as the x-axis, with sepal length fixed on the y-axis. SVG rendering and D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs drive the interactive updating, animated with `setInterval`.

Kkirangithub23
95% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, cycling through four different x-axis variables (petal width, sepal width, petal length, sepal length) every two seconds to compare against sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, while circles are created via a `.join` operation. The visualization demonstrates a reusable chart pattern where the same plot function is re-invoked with new data mappings, producing an animated tour of the dataset's dimensions.

MM Hema
95% match
Loading thumbnail…

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

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

Fork of Reusable D3 Scatter Plot

A reusable scatter plot animates the Iris Dataset, cycling through four measured variables on the x-axis every two seconds while sepal length remains fixed on the y-axis. Built with D3 v6, the chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The code demonstrates a configurable chart factory pattern, where setters like `.width`, `.data`, and `.xValue` update the visualization, with `setInterval` triggering re-renders to switch between petal width, sepal width, petal length, and sepal length.

SSravaniPosina
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

A reusable scatter plot animates the Iris Dataset, cycling through four measured variables on the x-axis every two seconds while sepal length remains fixed on the y-axis. Built with D3 v6, the chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The code demonstrates a configurable chart factory pattern, where setters like `.width`, `.data`, and `.xValue` update the visualization, with `setInterval` triggering re-renders to switch between petal width, sepal width, petal length, and sepal length.

SSravaniPosina
94% match