Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 26, 2022

Created on Mar 26, 2022

This visualization demonstrates a scatter plot exploring relationships between heart rate and steps, using the Iris Dataset as its foundation. The plot animates every two seconds, cycling through different column pairings to reveal various correlations. Built with D3 v6, it employs modular, reusable chart functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render interactive SVG circles. The code dynamically updates the x-axis mapping via `setInterval`, showcasing the flexibility of D3’s join pattern for smooth transitions between data dimensions.

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 shows the Iris Dataset in an animated scatter plot that cycles through different feature pairs every two seconds. It uses a reusable D3 scatter plot component, built with `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` from D3 v6. The plot is rendered as an SVG that fills the browser window, with circles sized by a fixed radius. The animation is driven by `setInterval`, which updates the x-value mapping and re-applies the plot to the SVG element.

0057SatvikDamera

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

88% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot displays the Iris Dataset, mapping measurements like leg length and shoulder length to axes while coloring each point by gender. It cycles through different column combinations every two seconds, updating the x-axis to reveal relationships between variables. Built with D3 v6, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles, with `setInterval` driving the animation. The code imports from the scatterPlot module, demonstrating a reusable chart pattern where dimensions like width, height, and data values are settable via closures.

CCherukuriMilind

87% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris dataset as an animated scatter plot, cycling through different feature pairs every two seconds. The plot reuses a configurable scatter plot module, demonstrating how to build reusable charts with D3 v6. It uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles. The animation updates the x-value accessor via `setInterval`, re-rendering the chart with smooth transitions. The code also implements a custom square symbol, though it is not actively used in the final rendering.

SSaiipriiya

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

87% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents the classic Iris dataset as an animated scatter plot that cycles through different feature combinations every two seconds. It demonstrates a reusable charting pattern where the plot’s axes, scales, and circles are recomputed on each update using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The visualization leverages D3’s `select` and `join` operations to update SVG circles and axis groups in place, producing a smooth transition between four variable pairings.

Bbhanuteja1807@gmail.com

87% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, cycling through four attribute pairings every two seconds. Built with D3 v6, it uses reusable chart patterns via a custom `scatterPlot` function, employing `scaleLinear`, `axisLeft`, and `axisBottom` for rendering. SVG circles display sepal and petal measurements, with axes updating dynamically as the x-value changes from petal width to sepal width, petal length, and sepal length.

KKeerthipriyaBankuru

87% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents the Iris Dataset as an animated scatter plot, cycling through different x-axis variables every two seconds to reveal relationships between petal and sepal measurements. The reusable chart component, built with D3 v6 functions like `scaleLinear`, `axisBottom`, and `axisLeft`, renders SVG circles colored by species. A `setInterval` drives the animation, updating the x-value mapping and re-calling the plot function. The code follows Mike Bostock’s reusable chart pattern, exposing setter methods for configuration and data binding.

KK V VINITHA

87% match