Fork of Reusable scatter plot with different symbols

100%

Fork of Reusable scatter plot with different symbols

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

Forked from Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length for individual flower samples. Different species are distinguished using distinct symbols applied via a d3.scaleOrdinal with an array of d3 symbols. The visualization uses D3 v6 APIs including d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.symbol. A reusable scatterPlot function configures margins, size, and accessor functions. Data is loaded as CSV and parsed before rendering as SVG paths within a full-window viewport.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example displays the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis, with each of the three species represented by a distinct symbol. The visualization is rendered as an SVG using D3 v6, leveraging a reusable `scatterPlot` module that employs `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` APIs to position marks and axes. Data is loaded asynchronously from a CSV URL, and the plot fills the browser window, with axes labeled via D3's tick rendering.

NNeeharikaGali

97% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length for individual flower specimens. The code uses d3.scaleLinear for the x and y axes, d3.axisLeft, and d3.axisBottom for the chart's frame. Each species is represented by a distinct symbol, drawn via d3.symbol and d3.symbols, with the symbol type selected through a d3.scaleOrdinal mapping species values to available symbols. The visualization is rendered as an SVG using a reusable scatterPlot function that accepts width, height, data, margin, and size as configurable parameters, with the final output fitted to the window dimensions.

SsreepavanKothapalli

97% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris Dataset with a scatter plot that maps petal width to the x-axis, sepal length to the y-axis, and encodes the iris species using different symbols. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render SVG paths for the marks and axes. The plot fills the entire browser window, with margins adjusted for labels. The code is structured as a reusable `scatterPlot` function that accepts configuration for data, dimensions, and value selectors.

NNeeharikaGali

96% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

A D3.js scatter plot visualizes the Iris dataset, mapping petal width on the x-axis and sepal length on the y-axis. Each species is represented by a distinct symbol from d3.symbols, with symbol types assigned via d3.scaleOrdinal. The visualization uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for tick marks, and a custom scatterPlot module to manage the reusable layout. Data is loaded asynchronously from a CSV file via d3.csv, and the SVG rendering fills the full browser window.

SSANEEM MOHAMMAD

96% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example displays the Iris Dataset as a scatter plot, mapping petal width and sepal length to x and y positions while encoding species with distinct D3 symbols. The code uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for scales, and the d3.symbol API to generate path shapes. Axes are rendered with d3.axisLeft and d3.axisBottom. The visualization is a reusable module, created via a custom scatterPlot function that is called once within an SVG container sized to the viewport.

Nnsatyaprakash22

96% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This D3.js scatter plot visualizes the Iris dataset, mapping petal width on the x-axis and sepal length on the y-axis. Each species is represented with a distinct symbol, determined by the `scaleOrdinal` and `symbols` APIs, with all points rendered at a fixed size. The visualization uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and `symbol().size()` to generate SVG paths. Data is loaded from a CSV via `d3.csv`, and the plot is drawn into a full-window SVG.

0057SatvikDamera

96% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width to sepal length for individual flowers. It uses the d3.scaleLinear and d3.scaleOrdinal APIs to position points and assign distinct symbols to each species. The d3.symbol and d3.join methods render the SVG marks, with axes generated by d3.axisLeft and d3.axisBottom. The visualization demonstrates a reusable D3 module that accepts configuration for data, dimensions, margins, and symbol size.

NNikitha123171

96% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each data point uses a distinct D3 symbol—circle, cross, diamond, square, star, triangle, or wye—determined by the iris species through a `scaleOrdinal` and the `symbol` generator. The visualization is rendered as SVG using D3 version 6.7.0, with axes created via `axisBottom` and `axisLeft`. The code is organized as a reusable `scatterPlot` function, accepting configurable accessor functions and margin settings, and loads data from a GitHub Gist using `d3.csv`.

BBala Sai Krishna

96% match