Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter Plot for IRIS

✓ Published0🌍 Public
DDeeraj Thakkilapati
Last edited Mar 13, 2023
Created on Mar 12, 2023

This example presents the classic Iris dataset as an interactive scatter plot, mapping petal width and sepal length to the x and y axes while encoding species with distinct symbols. Built with D3.js v6, it uses a reusable scatter plot factory function that leverages `scaleLinear`, `scaleOrdinal`, and `symbol` APIs. Data is loaded from a CSV file, rendered as SVG paths, and includes labeled axes with a custom font.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, comparing sepal length against petal width. Each flower species is represented by a distinct D3 symbol, generated using `scaleOrdinal` and the `symbol` API, with axes rendered via `axisLeft` and `axisBottom`. The reusable chart pattern, defined in `scatterPlot.js`, is invoked with D3’s selection `.call()` method, and the SVG output resizes to the full window. The data is loaded asynchronously from a CSV URL using `d3.csv` and parsed into numeric fields before plotting.

Ddldowning
92% match
Loading thumbnail…

Reusable D3 Scatter Plot with IRIS Data

This example presents a reusable scatter plot of the Iris dataset, cycling through four attribute pairs every two seconds. It renders SVG symbols whose shapes encode the flower species, with axes updating to reflect the current dimensions being compared. Built with D3 v6, the visualization uses `scaleLinear`, `scaleOrdinal`, `symbol` for mark generation, and `axisBottom`/`axisLeft` for scales. Data is loaded via `csv` from a GitHub gist, while a `setInterval` loop reconfigures the plot’s accessor functions to animate between variable combinations.

DDivyasri0310
92% match
Loading thumbnail…

Reusable scatter plot for iris data set with different symbols

This example renders the classic Iris dataset as a scatter plot, encoding species with different D3 symbols and using petal width and sepal length for the x- and y-axes. The reusable D3 chart is built with `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols`, while axes are drawn using `axisLeft` and `axisBottom`. Data is loaded asynchronously from a GitHub Gist via the D3 `csv` function, and the result is rendered as SVG. The plot fills the browser window, with margins and symbol size configured through a chainable API.

Vvidhyanamini
92% match
Loading thumbnail…

Reusable Scatter Plot Using Iris Dataset

A reusable D3.js scatter plot visualizes the Iris Dataset, encoding the three species with distinct SVG symbols (circle, plus, diamond) and colors from `schemeCategory10`. It uses `scaleLinear` for axes and `scaleOrdinal` for mapping species to shapes and colors, with the plot implemented as a reusable function with getters and setters for dimensions, data, and margins. Every ten seconds, the x-axis changes to a different flower measurement (petal width, sepal width, petal length, sepal length), dynamically updating the axes and points. Data is fetched from a GitHub gist CSV and parsed with string-to-number conversion for all numeric columns.

Sshiiva-surya
92% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot displays the Iris Dataset, mapping petal length against sepal length for three species of iris flowers. The visualization uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbol`, and `symbols` APIs to render an SVG plot with distinct symbols for each species. The chart is built as a configurable D3 module via a `scatterPlot()` function, which accepts width, height, data, value accessors, margins, and radius as chainable options. Data is loaded asynchronously from a CSV file using `d3.csv`.

Aabhineetsingh10
92% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the Iris Dataset, showing the relationship between petal width and sepal length with distinct symbols for each species. Built with a custom scatterPlot function, it uses D3's `scaleLinear` and `scaleOrdinal` for axes and symbol scaling, `axisLeft` and `axisBottom` for axis rendering, and `symbol().size()` to generate varied path shapes. The SVG output fills the browser window, with margins and a fixed symbol size of 100, while the data is parsed from a remote CSV, converting numeric columns to numbers before plotting.

EEeshwarReddy
92% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, plotting petal length against sepal length. The implementation uses a custom `scatterplot` function that takes configurable parameters for data, dimensions, margins, and point radius. It employs D3's `scaleLinear` for axis scaling, `scaleOrdinal` for symbol mapping, and `axisLeft`/`axisBottom` for rendering axes. The SVG visualization is generated declaratively with data-driven circles, and the code demonstrates a modular approach for creating reusable chart components with D3 7.6.1.

Yyankesswang
91% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example visualizes the classic Iris dataset in an animated scatter plot, encoding sepal and petal measurements across four dimensions while color-coding species. A reusable D3 module (`scatterPlot`) builds the plot using `scaleLinear`, `axisLeft`, and `axisBottom`, with circles that update every two seconds to cycle through measurement pairs. The SVG rendering includes a title, axis labels, and a color-coded legend for Iris species.

AAAL FORHAD
91% match