Skip to main content
SimilarExport ZIP
100%

Fork of Reusable scatter plot with different symbols

✓ Published0🌍 Public
Pprachow
Last edited Mar 12, 2023
Created on Mar 12, 2023

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length for three species. The plot encodes species identity through distinct D3 symbols, including a custom square symbol, and uses D3’s `scaleLinear` for axes and `scaleOrdinal` for symbol mapping. Data is loaded via `d3.csv` and rendered as SVG paths, with axes generated using `axisLeft` and `axisBottom`.

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 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
97% 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 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 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 scatter plot visualizes the Iris Dataset, mapping petal width against sepal length and encoding species with distinct D3 symbols. The visualization uses a reusable `scatterPlot` function that leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` to render SVG paths. The dataset is loaded as CSV via `d3.csv` and parsed into numeric values. Axis tick labels are styled at 24px, with the plot filling the entire browser window.

SSharanyaSriram
95% 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
95% 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
95% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This visualization displays the classic Iris dataset, mapping petal width against sepal length across three flower species. Built with D3 v6, it renders as an SVG scatter plot using distinct geometric symbols from `d3.symbol` and `d3.symbols` to differentiate species. The code employs `d3.scaleLinear` for axes, `d3.scaleOrdinal` for symbol mapping, and D3 selections with the `.join()` pattern to bind data to paths. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with axes generated through `d3.axisLeft` and `d3.axisBottom`.

Mmboinapally17
95% match