Iris Reusable D3 Scatter Plot

100%

Iris Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 26, 2023

Created on Mar 26, 2023

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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

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

94% match

Loading thumbnail…

Reusable Scatter Plot 11540905

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length with distinct D3 symbols representing different species. The D3 v6 code uses a custom reusable `scatterPlot` module with `scaleLinear` for axes, `scaleOrdinal` for symbol encoding, and `d3.axisLeft`/`d3.axisBottom` for ticks. Data is loaded as CSV and parsed into numeric columns. The SVG renders within the full viewport, with marks generated via `d3.symbol` and a fixed symbol size of 100.

Nnagasai-gummadi

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

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This visualization renders the Iris Dataset as an interactive scatter plot, mapping petal width and sepal length along the x and y axes. It distinguishes the three flower species through different symbol shapes (circles, crosses, and diamonds) rather than colors, using d3.scaleOrdinal and d3.symbol. Built with D3 v6, the reusable scatterPlot function chains configuration methods for data, value accessors, margins, and symbol size. The SVG output includes axis labels via d3.axisLeft and d3.axisBottom, with the plot sized to fill the browser window. Data is loaded asynchronously from a remote CSV using d3.csv.

KKamilPodsiadlo

93% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through different combinations of petal width and sepal length every three seconds. Using the D3.js library, it employs a declarative, reusable `scatterPlot` component that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The SVG visualization dynamically updates its x-value mapping, animating through the dataset columns while rendering circles and labeled axes with a fixed margin and radius. Data is loaded asynchronously from a remote CSV via `d3.csv`.

Lliu yang

93% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data, scale positions, and render axes. Circles of fixed radius are drawn as SVG elements with coordinates computed from the scaled values. The chart fills the browser window, with the data sourced from a GitHub Gist and rendering done entirely in SVG.

KKerim

92% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This scatter plot visualizes the Iris Dataset, mapping sepal length against petal width with D3 v6. The code uses `d3.csv` to load data and `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes. A `d3.scaleOrdinal` and `d3.symbol` generator draw points as SVG paths, with symbol types based on species. The `scatterPlot()` function is reusable, configured via chained methods for dimensions, margins, and accessors.

AAlena

92% match