Skip to main content
SimilarExport ZIP
100%

Reusable scatter plot with different symbols

✓ Published63🌍 Public
Ssaisreearibandi
Last edited Mar 10, 2023
Created on Mar 9, 2023

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.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. 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 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
96% match
Loading thumbnail…

Reusable scatter plot with different symbols

This example presents a scatter plot of the Iris dataset, using different symbol shapes and colors to distinguish the three plant species based on petal width and sepal length. The visualization is built as a reusable D3 component with a configured margin, scales, and axes. The code imports D3’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols` APIs to map data values to chart positions and marker types, while `csv` loads the remote dataset. Rendered as SVG, the plot resizes to fit the window and includes custom tick styling.

Pprachow
95% 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
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 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
95% 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 scatter plot with different symbols

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, encoding petal width on the x-axis, sepal length on the y-axis, and species with different SVG symbols. The code uses D3 version 6’s `csv` loader and `select` method to fetch and render the data, while a custom `scatterPlot` function encapsulates the chart’s configuration. The plot is drawn as an SVG with dynamic sizing based on the viewport, and symbol shapes differentiate the three species. The implementation highlights a modular, reusable approach to building charts with D3.

SSaivignesh-9176
95% match