Skip to main content
SimilarExport ZIP
100%

Fork of Reusable scatter plot with different symbols

✓ Published0🌍 Public
Mmboinapally17
Last edited Mar 22, 2023
Created on Mar 22, 2023

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

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

Fork of Reusable scatter plot with different symbols

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

Pprachow
95% 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
95% 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
95% 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
95% match