Skip to main content
SimilarExport ZIP
100%

Fork of D3 Scatter Plot using iris data set

✓ Published0🌍 Public
RRaja Srinivas Nelluri
Last edited Mar 28, 2022
Created on Mar 28, 2022

This interactive scatter plot visualizes the Iris dataset, displaying measurements of petal and sepal dimensions for three flower species. Using D3’s `scaleLinear`, `scaleOrdinal`, and `axisLeft`/`axisBottom`, the chart renders SVG symbols that change shape per species while the x-axis automatically cycles through different measurement columns every 15 seconds. The reusable chart component, inspired by "Towards Reusable Charts," relies on D3’s `selectAll` and `join` for incremental updates. Data is loaded asynchronously via `csv` from a remote URL, with all elements and axes redrawn to fit the full window size.

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 scatter plot

This interactive scatter plot visualizes the Iris dataset, encoding petal and sepal measurements as the x and y coordinates of colored circles that represent flower species. Built with D3 v6, it uses `d3.csv` for data loading, `d3.scaleLinear` and `d3.extent` for scales, and `axisBottom`/`axisLeft` for axes. The visualization cycles through different measurement pairings via `setInterval`, updates the x-axis label dynamically, and includes a color-coded legend for the three species.

Rrajasrilekkala
92% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, encoding petal and sepal measurements for three flower species. The D3.js (v6.7.0) visualization cycles through four column combinations on the x-axis while the y-axis remains fixed, animating the points with each interval. A legend identifies species by color (green for setosa, orange for versicolor, blue for virginica). The implementation uses reusable scatter plot logic from `scatterPlot.js` with `scaleLinear`, `axisLeft`, and `axisBottom`, while `index.js` handles data parsing, marker styling, and dynamic axis updates.

Cchandanagandla
92% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal width against sepal length while coloring each dot by species (setosa, versicolor, and virginica). Built with D3 v3, it uses `d3.csv` to load data, `scaleLinear` for axes, and `setInterval` to cycle through different data columns every two seconds, updating the x-axis. The SVG rendering includes custom circle markers with varying dimensions and a rotating set of axis labels.

Bbhargavarathod
92% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example displays the Iris Dataset as an interactive scatter plot, mapping petal length and sepal length for each specimen on a full-window SVG. It uses the D3.js v6 library, specifically importing functions like `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The code asynchronously fetches CSV data from a remote Gist, parses numeric fields, then binds circles to the data points at computed x and y positions. Axes are rendered with D3’s standard axis components, and the chart automatically resizes to fill the browser viewport.

Nnikhitha693
92% match
Loading thumbnail…

Fork of Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal and petal dimensions across three species. Users can dynamically select which measurement appears on each axis through dropdown menus, with the chart redrawing to reflect the new configuration. The visualization uses D3.js v7 with SVG rendering, employing d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and d3.scaleOrdinal for color coding by species. The code loads data from a CSV file and includes a legend identifying the three species.

VVinod Pahuja
92% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, showing how petal and sepal measurements relate across three flower species. It cycles through four variable combinations on the x-axis every few seconds while displaying petal width on the y-axis. The visualization uses D3 v6 functions like `scaleLinear`, `axisLeft`, and `axisBottom`, with SVG symbols for data points and a color-coded legend. Each species is represented by a distinct shape and color, with the chart updating via `setInterval`.

SSharmaAshwini
91% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length and using different symbols and colors to distinguish the three species. Built with a reusable D3 chart function, it employs `scaleLinear` for axes, `scaleOrdinal` for categorical symbol and color mappings, and SVG rendering. A legend identifies species, while an animation cycles through different x-axis variables every two seconds, dynamically updating the plot via the chart's accessor methods.

AAniv Chakravarty
91% match
Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping petal length against sepal length using a linear scale for each axis. The code loads the CSV data via d3.csv and renders circles as SVG marks, with axes drawn using d3.axisRight and d3.axisBottom. It uses d3.scaleLinear with extents derived from the data, and the chart fills the entire window with a fixed margin around the plot area. The visualization updates dynamically based on the browser’s dimensions.

HHarshit-Prasad
91% match