Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter Plot_Niharika

✓ Published2🌍 Public
NNiharika Reddy Amanaganti
Last edited Mar 26, 2023
Created on Mar 26, 2023
Forked from Hello VizHub

This visualization displays the Iris dataset using an animated scatter plot that cycles through different feature combinations every two seconds. The plot represents each flower species with distinct symbols created through D3's `symbol` generator and `scaleOrdinal` color encoding, with axes updated dynamically via `axisBottom` and `axisLeft`. The reusable `scatterPlot` function leverages D3 v6 scales like `scaleLinear` and `scaleOrdinal` to map sepal and petal measurements, rendering everything as SVG elements that re-bind data on each interval.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 Scatter Plot_Niharika

This interactive scatter plot explores the Iris dataset, displaying sepal length against petal width as animated circles. It cycles through different column pairings every two seconds, letting viewers see relationships between all four flower measurements. The visualization uses D3 v6’s modular API, including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, to render axes and marks in SVG. Data is loaded from a CSV file, and the chart is built as a reusable function with configurable width, height, margins, and radius.

NNiharika Reddy Amanaganti
94% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, cycling through different feature pairs on the x-axis via an animation. The visualization uses D3 v6 to render SVG circles colored by species, with a legend and axis labels updating dynamically. The scatter plot is implemented as a configurable function via `scatterPlot()`, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. A `setInterval` updates the x-axis mapping, while the y-axis remains fixed to sepal length. The code loads CSV data from a Gist and displays it across the full viewport.

Aadapavaishnavi12
91% match
Loading thumbnail…

Reusable D3 Scatter Plot

A reusable scatter plot displays the Iris Dataset, coloring each point by species (setosa, versicolor, virginica) and animating through different feature-pair combinations every six seconds. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and data joins to render SVG circles, while the chart factory pattern (`scatterPlot()`) exposes setters for width, height, margins, and accessors. The animation cycles x-axis values across petal width, sepal width, petal length, and sepal length, updating axes and marks accordingly.

RRamya19-hub
91% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization presents the Iris Dataset as an animated scatter plot, where each flower species appears as a distinct symbol (circle, star, or triangle) colored purple, blue, or green. The plot automatically cycles through different x-axis variables every two seconds, switching between petal width, sepal width, petal length, and sepal length, while keeping sepal length on the y-axis. Built with D3 v6, the reusable scatter plot component uses `scaleLinear` for axes, `scaleOrdinal` for categorical mapping, and `symbol` for custom shape rendering, with a legend displayed in the corner.

Ggeethikal
91% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris Dataset, displaying measurements like petal width and sepal length as colored circles. It cycles through different column pairs every two seconds, animating the axes and points to show relationships between various flower attributes. The chart uses D3 v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function that follows the reusable chart pattern. Data loads via `csv` from a GitHub Gist, and the SVG rendering updates smoothly as the selected variables change.

AAkrutiKhurana2103
91% 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. 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.

Bbhanuteja1807@gmail.com
91% match
Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, with each circle representing a flower sample. The visualization cycles through different column pairs every two seconds, animating between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length fixed on the y-axis. Built with D3.js v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, demonstrating a reusable chart pattern where the same plot function is called repeatedly with updated accessors.

DDINESH SAI BOPPANA
90% match
Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot explores the iris dataset, displaying three species of flowers distinguished by color and shape. It cycles through different petal and sepal measurements every ten seconds, dynamically updating both axes and the position of each data point. The visualization is built with D3 version 6, using `scaleLinear` for axes, `scaleOrdinal` with `symbols` for species-specific shapes, and `schemeCategory10` for colors. SVG rendering and an animated transition between variable pairs show how the data relationships shift across dimensions.

BBhavanaGIrni
90% match