Skip to main content
SimilarExport ZIP
100%

Fork of Reusable scatter plot with different symbols

✓ Published0🌍 Public
Bbhanuteja1807@gmail.com
Last edited Mar 25, 2023
Created on Mar 25, 2023

This scatter plot displays the Iris dataset, plotting petal width against sepal length, with each species (setosa, versicolor, virginica) represented by a distinct symbol. The visualization is constructed as a reusable D3 function, `scatterPlot`, which uses `scaleLinear` for axes, `scaleOrdinal` to map species to symbol types via `symbols`, and `symbol().size()` to generate the marker paths. The `index.js` orchestrates loading CSV data with `csv`, parsing numeric fields, and applying the plot function to an SVG, while also adding custom axis labels and a title.

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 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
97% 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
97% 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 scatter plot visualizes the Iris Dataset, mapping petal width against sepal length for individual flowers. The data comes from a CSV file loaded via `d3.csv`, and each species is represented by a distinct symbol using `d3.scaleOrdinal` and the `d3.symbol` API. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, while the reusable `scatterPlot` function handles the layout and rendering. The SVG output is sized to the full browser window, with axes and ticks styled via CSS. The plot is built with D3 v6 and focuses on comparing species distributions across two measured traits.

PPrathyusha Jampala
96% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This D3.js scatter plot visualizes the Iris dataset, mapping petal width and sepal length to the x and y axes. Each of the three iris species is represented by a distinct symbol from the `d3.symbols` collection, using the `scaleOrdinal` scale. The visualization uses `scaleLinear` for axes, `axisLeft`, and `axisBottom` for ticks, and renders as an SVG. The code creates a reusable `scatterPlot` function that accepts data, value accessors, and margin settings, with data loaded from a CSV file.

DDonald Bagwell
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 scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the x and y axes, with each species represented by a distinct D3 symbol shape. Built as a reusable D3 module, it uses `scaleOrdinal` to assign symbols, `scaleLinear` for axes, and `symbolGenerator` to generate SVG paths. The code draws axes with `axisLeft` and `axisBottom`, and loads data asynchronously via `d3.csv`.

SSravaniPosina
96% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example presents the classic Iris dataset as a reusable D3 scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Different species are distinguished through distinct SVG symbols, generated using D3’s `symbol` and `scaleOrdinal`. The visualization is built with a reusable `scatterPlot` function, which configures linear scales, axes, margins, and symbol size. Data is loaded as CSV via D3’s `csv` method, and the plot updates the DOM by joining path elements. The output is a clean, interactive-free scatter chart rendered as SVG.

LLakshmiManjushaReddyYarreddu
96% match