Fork of Reusable scatter plot with different symbols

100%

Fork of Reusable scatter plot with different symbols

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 23, 2023

Forked from Reusable scatter plot with different symbols

This example visualizes the Iris Dataset as an interactive scatter plot, mapping petal length and sepal width to the x and y axes while encoding species with distinct symbols. It uses a reusable D3 module pattern, with the `scatterPlot` function configuring scales, axes, and symbol generation. The code leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisBottom`/`axisLeft` to render SVG paths for each data point, sized at 100 pixels. The plot fills the window and fetches data from a GitHub Gist URL using `d3.csv`.

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

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 is a reusable scatter plot that visualizes the Iris Dataset, using distinct symbols to represent different species. The plot maps petal width to the x-axis and sepal length to the y-axis, with axis labels rendered via `d3.axisLeft` and `d3.axisBottom`. The implementation leverages `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate SVG paths for each data point. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed with a custom row handler. The plot’s dimensions adapt to the browser window, and styling is applied through a linked stylesheet.

Bbhanuteja1807@gmail.com

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

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width and sepal length for individual flowers while encoding species with different D3 symbols. The reusable `scatterPlot` function uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` to assign symbols from the `d3.symbols` collection, and `d3.symbol().size()` to generate paths. Data is loaded via `d3.csv`, and the plot renders in SVG with axes created by `d3.axisLeft` and `d3.axisBottom`.

Ssnehareddygurram

96% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris dataset as a scatter plot, encoding petal width and sepal length on the x- and y-axes. Different species are distinguished using D3 symbols (circles, crosses, and diamonds) with red, green, and blue fills. The code builds the chart with a reusable `scatterPlot` function that leverages d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisLeft/axisBottom. A legend shows each species with its corresponding symbol and color. The SVG rendering and margins are configured in the main script.

Nnsatyaprakash22

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 and using distinct symbols for each species. It uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols` to render SVG paths, with axes generated via `axisLeft` and `axisBottom`. The chart is built through a reusable `scatterPlot` function configured with margin, size, and accessor methods. Data is loaded as CSV from a GitHub gist and parsed into numeric values.

Vvamshisoletii

96% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris Dataset using a scatter plot where each species is represented by a different D3 symbol. The code uses `d3.csv` to load the data, `scaleLinear` for x and y axes, and `scaleOrdinal` to map species to symbol types from `d3.symbols`. A reusable `scatterPlot` function encapsulates the chart, rendering marks as SVG `path` elements via `symbolGenerator` and including `axisLeft` and `axisBottom` for scales. The plot fills the browser window using `window.innerWidth` and `window.innerHeight`.

SSANEEM MOHAMMAD

96% match