Skip to main content
SimilarExport ZIP
100%

Fork of Reusable_D3_Scatter_Plot.

✓ Published0🌍 Public
DDonald Bagwell
Last edited Dec 20, 2023
Created on Dec 20, 2023

This interactive scatter plot displays the Iris dataset, using D3 v6 to render SVG circles colored by species (red for setosa, violet for versicolor, orange for virginica). The visualization cycles through four flower measurements—petal width, sepal width, petal length, and sepal length—on the x-axis via `setInterval`, while sepal length remains on the y-axis. It uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and includes a static legend with labeled species points.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, with each point colored by species (setosa, versicolor, or virginica). The visualization cycles through four different x-axis attributes—petal width, sepal width, petal length, and sepal length—at regular intervals, updating the chart dynamically using `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. A legend and axis labels are rendered as SVG text elements. The animation is driven by `setInterval`, which re-calls the reusable `scatterPlot` function built on D3 v6.

SSUSHMA CHIRRA
96% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.(11580431)

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal and sepal measurements across three species. The visualization uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render SVG axes and circles, with a setInterval that cycles the x-axis through four measurement columns every few seconds. The code imports data via d3.csv, applies custom color coding for species, and includes a legend with labeled points. A separate scatterPlot function encapsulates the chart's reusable structure.

Vviswak12
95% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, mapping petal and sepal measurements. A D3.js animation cycles through the four measurement columns on the x-axis, while y-values remain fixed on sepal length. Data points are colored by species (setosa, versicolor, virginica), with a legend displayed. The visualization is built with the D3.js library using React, rendered as an SVG with animated transitions, and includes axis labels and a title.

Hhm0421
95% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, mapping petal and sepal measurements. A D3.js animation cycles through the four measurement columns on the x-axis, while y-values remain fixed on sepal length. Data points are colored by species (setosa, versicolor, virginica), with a legend displayed. The visualization is built with the D3.js library using React, rendered as an SVG with animated transitions, and includes axis labels and a title.

Hhm0421
95% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset with color-coded markers for species. Built with React and D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with SVG circles for rendering. An animated `setInterval` cycles the x-axis through different flower measurements. CSS styling uses the Share Tech font, and the legend labels each species with distinctive colors.

Hhm0421
95% match
Loading thumbnail…

Fork of Fork of Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset using D3 v6 within a React framework, rendering as SVG with animated transitions. The plot cycles through different x-axis variables (petal width, sepal width, petal length) on a timed interval, while the y-axis shows sepal length. Points are colored by species—setosa, versicolor, and virginica—with a custom color legend and axes generated using `scaleLinear`, `axisLeft`, and `axisBottom`. Data is loaded via `csv` from a VizHub URL, with all marks drawn as circles.

NNeeharikaGali
95% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot animates through the four numeric measurements of the classic Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length. Each point is colored by species (setosa, versicolor, virginica) using a custom color mapping. Built with React and D3.js v6, it uses `d3.csv` for data loading, `scaleLinear` for axes, and `setInterval` to drive the animation, rendering via SVG with a fixed y-axis of sepal length. The visualization includes a custom legend and labeled axes.

VVineela Reddy
95% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairings on the x-axis every few seconds. Points are color-coded by species (setosa, versicolor, and virginica), with a legend and axis labels updating dynamically. Built with D3 v6 and React, the visualization uses `d3.csv` to load data, `scaleLinear` and `axisBottom`/`axisLeft` for scales and axes, and `setInterval` to animate transitions between sepal and petal measurements. SVG circles render the data, while CSS styling applies a custom font.

NNikitha123171
95% match