Reusable IRIS scatter plot with different symbols

100%

Reusable IRIS scatter plot with different symbols

✓ Published0🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length, with each species represented by a distinct symbol and color from D3’s ordinal scales. The reusable `scatterPlot` component, configured via method chaining, handles axis generation, symbol rendering, and a legend. It uses D3’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axis` APIs, with data loaded from a CSV URL. The SVG output is sized to the window, and the legend displays species names with corresponding symbols.

AI-generated description

A scatter plot of the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable scatter plot with different symbols

This example visualizes the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each data point is rendered as a distinct symbol from D3’s `symbols` set, with the species of iris determining which symbol shape is used. The visualization is built as a reusable D3 component using `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol().size(100)` to generate the scatter plot’s marks. The `scatterPlot` function is configured with margin, size, and accessor functions, while the SVG rendering fills the browser viewport.

Vvamshisoletii

95% match

Loading thumbnail…

Reusable scatter plot with different symbols

This example presents the Iris dataset as a reusable scatter plot where each species is encoded with a distinct symbol shape. The visualization maps petal width to the x-axis and sepal length to the y-axis, with data points rendered as SVG paths. The code implements a reusable `scatterPlot` function using D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, and `symbol` to generate shapes, while `axisLeft` and `axisBottom` create the axes. The plot is sized to the full window, fetching data from a remote CSV file.

Ssaisreearibandi

94% match

Loading thumbnail…

Reusable scatter plot with different symbols

This interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length along the x and y axes while using distinct symbols to represent different species. Built with D3 v6 and React, it renders as an SVG that fills the browser window. The reusable `scatterPlot` component leverages `scaleLinear`, `scaleOrdinal`, `symbols`, and `symbol` to generate the plot, with `axisLeft` and `axisBottom` for the axes. The chart also provides the 100-pixel marks and axis tick styling via CSS.

AAISWARYAMARAPATLA1999

94% match

Loading thumbnail…

Reusable scatter plot with different symbols

This example displays the Iris Dataset in a scatter plot, encoding each flower species with a distinct symbol shape. The reusable scatter plot implementation, built with D3.js, maps petal width to the x-axis and sepal length to the y-axis. The `scatterPlot` module uses D3’s `scaleLinear` for axes, `scaleOrdinal` for symbol assignment, and `symbol` to generate SVG path data. It loads data from a remote CSV, renders axis ticks at 24px, and fills the browser window.

SSRI RAM REDDY KOTERU

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

93% match

Loading thumbnail…

Reusable scatter plot with different symbols

A reusable scatter plot displays the Iris Dataset, mapping petal width against sepal length and encoding species with distinct D3 symbols via `d3.symbol` and `d3.scaleOrdinal`. The D3 v6 code constructs the visualization using `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and SVG `path` elements for marks. It follows the reusable chart pattern, exposing configurable width, height, margins, and accessor functions. The plot renders with a 100-pixel symbol size and includes a legend-less categorical differentiation of the three iris species.

Mmboinapally17

93% match

Loading thumbnail…

Reusable scatter plot for iris data set with different symbols

This example renders the classic Iris dataset as a scatter plot, encoding species with different D3 symbols and using petal width and sepal length for the x- and y-axes. The reusable D3 chart is built with `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols`, while axes are drawn using `axisLeft` and `axisBottom`. Data is loaded asynchronously from a GitHub Gist via the D3 `csv` function, and the result is rendered as SVG. The plot fills the browser window, with margins and symbol size configured through a chainable API.

Vvidhyanamini

93% match

Loading thumbnail…

Reusable scatter plot with different symbols

This example presents the classic Iris Dataset as an interactive scatter plot rendered with SVG. It maps petal length to the x-axis and sepal width to the y-axis, using distinct symbols and colors (yellow, orange, navy) to differentiate the three iris species. Built with D3 v6, the code defines a reusable `scatterPlot` component that leverages `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisBottom`/`axisLeft` to generate the chart. The visualization resizes to the full browser window and parses the CSV data via `d3.csv`.

SSUSHMA CHIRRA

93% match