Reusable Scatter Plot 11540905

100%

Reusable Scatter Plot 11540905

✓ Published0🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

Forked from Reusable scatter plot with different symbols

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.

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

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

95% match

Loading thumbnail…

Reusable scatter plot

This example shows a reusable scatter plot of the Iris dataset, encoding petal width on the x-axis, sepal length on the y-axis, and species as symbol shapes. Built with D3.js, it uses a custom `scatterPlot` function that takes data, value accessors, and margin configuration, then renders SVG paths via the `symbol` and `symbols` APIs. It also applies `scaleLinear` for axes, `scaleOrdinal` for categorical mapping, and `axisLeft`/`axisBottom` for tick marks, with data parsed from a CSV URL.

KKiran Jyothi Bodduluri-11604571

94% match

Loading thumbnail…

Reusable scatter plot with different symbols

A reusable scatter plot displays the Iris Dataset, mapping petal width against sepal length and encoding species with distinct D3 symbols via `d3.symbol` and `d3.scaleOrdinal`. The D3 v6 code constructs the visualization using `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and SVG `path` elements for marks. It follows the reusable chart pattern, exposing configurable width, height, margins, and accessor functions. The plot renders with a 100-pixel symbol size and includes a legend-less categorical differentiation of the three iris species.

Mmboinapally17

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

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

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…

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

93% match

Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This reusable scatter plot displays the Iris dataset, mapping petal width and sepal length while encoding species with distinct D3 symbols. Built with D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` to map species to symbol types, and a custom `symbol` generator to render SVG paths. The chart renders into a full-window SVG and includes labeled axes with a large font size.

CCurran Kelleher

93% match