Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 23, 2022

Created on Mar 23, 2022

This example presents a reusable scatter plot of the Iris Dataset, where points animate through different x-axis variables (petal width, sepal width, petal length, and sepal length) every two seconds via `setInterval`. It uses D3 v6 APIs such as `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, `csv`, and `select` to render SVG circles with axes. The plot is built as a reusable function that updates its x-value mapping dynamically, demonstrating a configurable chart with a live cycling view of the dataset’s measurements.

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 cycles through different dimensions of the Iris dataset every two seconds, animating the points as the x-axis mapping changes between columns such as petal width and sepal length. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and data joins to render SVG circles with axes. It loads CSV data via `d3.csv`, parses numeric fields, and applies a custom margin and fixed radius per point. The animation is driven by `setInterval`, updating the x-value accessor and re-invoking the chart function.

MMeghanaArepalli

96% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a scatter plot of the Iris dataset, with axes for sepal length and petal width. The visualization cycles through different data columns every two seconds, updating the x-axis and circle positions via a `setInterval` callback. It is built with D3 v6, using `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, and a reusable chart function pattern. The SVG rendering includes animated transitions as the data mapping changes.

GGogineni44

96% match

Loading thumbnail…

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

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different x-axis dimensions (petal width, sepal width, petal length, sepal length) every two seconds while keeping sepal length on the y-axis. It uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()` to render SVG circles and update axes. The reusable chart module, defined via a closure with getter-setter methods, is called with `.call(plot)` to re-render the visualization.

Mmahee0725

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a scatter plot of the Iris Dataset, with points colored by species. The visualization cycles through four different x-axis mappings—petal width, sepal width, petal length, and sepal length—every two seconds, animating the transitions between views. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the plot, while a `setInterval` loop updates the x-value accessor and re-invokes the reusable chart function. SVG circles represent the data points, and axes are redrawn with each update.

AAlankruthSai

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris Dataset, where the x-axis cycles every two seconds through the four measured features (petal width, sepal width, petal length, sepal length) while the y-axis remains fixed on sepal length. It uses D3 v6's `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable chart pattern. SVG circles are positioned and transitioned via a `setInterval` loop that calls the chart function repeatedly, with styling applied from the Share Tech font.

Ssnehareddygurram

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

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris Dataset, cycling through the four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis while sepal length remains on the y-axis. It demonstrates a reusable chart pattern using D3 v6, where a `scatterPlot` function returns a configurable closure that sets scales, joins circle elements to data, and renders axes with `axisLeft` and `axisBottom`. The visualization rotates through columns every two seconds via `setInterval`, updating the x-value accessor and re-invoking the chart. It loads data asynchronously with `csv` from a GitHub Gist and renders in SVG within the full browser viewport.

Ssudhamshu24

95% match