Reusable scatter plot with different symbols

100%

Reusable scatter plot with different symbols

✓ Published0🌍 Public

Last edited Mar 22, 2023

Created on Mar 22, 2023

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows 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

96% match

Loading thumbnail…

Reusable scatter plot with different symbols

This example presents a reusable scatter plot of the Iris Dataset, encoding sepal length against petal width. Each species is visually distinguished by a different D3 symbol, with axes scaled using `d3.scaleLinear`. The plot is built as a custom charting function that chains configurable accessors for data, dimensions, and margins. It leverages `d3.scaleOrdinal` to map species to `d3.symbols`, and renders SVG paths via `d3.symbol` and the `d3.axisBottom` and `d3.axisLeft` components.

NNithish Kumar

95% match

Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This reusable D3 scatter plot visualizes the Iris dataset by mapping petal length and sepal length along the x and y axes, with species encoded through distinct symbols. Built with D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` with `symbols` and `symbol` to render marks as SVG paths, and `axisLeft`/`axisBottom` for the chart framework. The `scatterPlot` function is configurable via chained setters for width, height, data, and margins, ingesting CSV data through `csv` and rendering in an SVG container.

Wwspwll@gmail.com

95% match

Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This reusable scatter plot displays the Iris dataset, mapping petal width and sepal length while encoding species with distinct D3 symbols. Built with D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` to map species to symbol types, and a custom `symbol` generator to render SVG paths. The chart renders into a full-window SVG and includes labeled axes with a large font size.

CCurran Kelleher

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

95% match

Loading thumbnail…

Reusable scatter plot with different symbols

A reusable D3 scatter plot visualizes the Iris Dataset, mapping petal width and sepal length for different iris species. Each species is represented by a distinct symbol from d3.symbols, including circles, crosses, and diamonds. The plot uses d3.scaleLinear for axes, d3.scaleOrdinal for symbol mapping, and d3.axisBottom/axisLeft for ticks. An SVG renderer displays the points, with margins and a fixed symbol size configured through a reusable chart function.

Kkollirohit2000

95% match

Loading thumbnail…

Reusable scatter plot implementing different symbols

This example presents a reusable scatter plot that visualizes the Iris dataset, encoding species through different symbols. Built with D3 v6, it leverages d3.scaleLinear for axes, d3.scaleOrdinal to map species to a symbol range, and d3.symbol to generate the varying path shapes. The plot renders to an SVG canvas, with margins and axis labels for sepal_length and petal_width. The reusable scatterPlot function is configured through a fluent interface, accepting data, value accessors, and symbol mappings. Styling is applied via CSS, with additional d3.axisLeft and d3.axisBottom components.

HHarshavardhan

95% match

Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

A reusable D3 scatter plot displays the Iris Dataset, mapping petal width against sepal length and encoding species with distinct SVG symbol shapes from `d3.symbol`. The chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` to assign symbols, and `d3.axisLeft`/`d3.axisBottom` for ticks. A `scatterPlot` factory function configures dimensions, margins, and accessors via chained methods, then renders paths using `d3.symbolGenerator`. Data is loaded asynchronously with `d3.csv` from a GitHub Gist, and the plot fills the window with a 24px tick font.

TToly

94% match