Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

Forked from Reusable scatter plot with different symbols

This visualization displays the Iris dataset as an animated scatter plot, cycling through different feature pairs every two seconds. It uses D3.js v6 with reusable chart components, employing `scaleLinear` for axes, `scaleOrdinal` with `symbols` for point shapes, and `axisLeft`/`axisBottom` for tick marks. The plot transitions between four measurement columns—PetalWidth, SepalWidth, PetalLength, and SepalLength—using `setInterval` to redraw the SVG with new x-value assignments.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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

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

96% match

Loading thumbnail…

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

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This is a reusable scatter plot that visualizes the Iris Dataset, cycling through different feature combinations every two seconds. The chart maps petal width against sepal length initially, then rotates through other attributes using a `setInterval`. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render axes, with circles positioned via the modular `scatterPlot()` function. The SVG output animates smoothly, updating both data mappings and axis scales with each interval.

JJetlinZ

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, cycling through four numeric attributes on the x-axis every two seconds. The reusable chart component uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map petal and sepal measurements to SVG circles with a fixed radius. Axes update dynamically via `setInterval`, while the chart’s configuration methods for width, height, margins, and value accessors enable customization. The visualization demonstrates a modular pattern for building flexible, animated plots with D3’s data joins and SVG rendering.

SSnapika

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot uses the D3.js library to visualize the Iris Dataset, cycling through different feature combinations every two seconds. The chart displays petal and sepal measurements as circles, with axes that update to reflect the currently selected dimensions. Using D3's `scaleLinear`, `extent`, and axis functions, the visualization smoothly transitions between four variable pairings, always keeping the y-value fixed on sepal width while rotating the x-axis through petal width, sepal width, petal length, and sepal length.

MManideepChakilam

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

The visualization displays the Iris Dataset as a scatter plot, animating between four measurement variables every two seconds. It uses D3 v6’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loader. The reusable chart pattern, inspired by Bostock’s “Towards Reusable Charts,” configures width, height, margins, and radius via getter-setter methods. SVG circles and axes update in-place through `selection.join`, while `setInterval` cycles the x-axis variable among petal width, sepal width, petal length, and sepal length.

PPlatoch

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This is an animated scatter plot that visualizes the Iris Dataset, cycling through different pairs of measurements (petal width, sepal width, petal length, sepal length) every two seconds. It uses D3 v6 for rendering SVG circles and axes, with the `scatterPlot` function as a reusable chart component. The plot updates its x-axis encoding based on a rotating column list, leveraging D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Data is loaded from a CSV file, and the visualization fills the entire browser window.

Ppavan vasamsetti

95% match