Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Jun 29, 2022

Created on Jun 29, 2022

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.

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

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 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.

Ggopiganta

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through four flower measurements (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while sepal length remains on the y-axis. Built as a reusable chart function, it uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for scales, `axisLeft` and `axisBottom` for axes, and `selectAll` with data joins to update circle positions. The SVG visualization also applies a custom font and full-window sizing.

MMounishSeeni

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

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

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 example presents an interactive scatter plot of the Iris dataset, cycling through different feature pairings on the x-axis every two seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles. The chart is reusable via a custom `scatterPlot` function that exposes setters for width, height, data, margins, and accessor functions, allowing the x-axis to dynamically switch between petal width, sepal width, petal length, and sepal length while the y-axis remains fixed on sepal length.

RRohith arabati

95% match