Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Symbols

✓ Published2🌍 Public
Ggeethanjalikotaru
Last edited Mar 25, 2023
Created on Mar 25, 2023

This scatter plot displays the Iris Dataset, mapping petal width and sepal length on the x- and y-axes. Each data point is rendered as a distinct SVG symbol according to the flower species, using the d3 symbols API with a size of 100. The implementation builds a reusable scatter plot module with d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, and d3.axisBottom. Data is loaded from a CSV file via d3.csv, and the plot fills the browser window by setting width and height to window dimensions.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

scatter plots with different symbols

This scatter plot displays the Iris dataset, mapping petal width on the x-axis and sepal length on the y-axis. Three species markers use different D3 symbol shapes, generated with `d3.symbol` and `d3.symbols`. A `d3.scaleOrdinal` assigns symbols, while `d3.scaleLinear` handles axes, rendered with `d3.axisLeft` and `d3.axisBottom` in an SVG. The chart is built with a reusable `scatterPlot` function using D3 v6.

Ssiddu7147
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width on the x-axis against sepal length on the y-axis. It uses distinct symbols for each iris species, generated via D3's `scaleOrdinal` and `symbol` APIs to differentiate categories. The plot is rendered as an SVG, with axes created using `axisLeft` and `axisBottom`. The reusable chart component, inspired by Bostock’s "Towards Reusable Charts," accepts configurable data, value accessors, margins, and symbol size, demonstrating a modular approach to D3 visualization.

Ssugunagar
92% match
Loading thumbnail…

Reusable D3 Scatterplot with Symbols

This reusable D3 scatterplot displays the Iris dataset, plotting petal width against sepal length with points colored by species. The visualization uses D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbols`, and `symbol` APIs to generate scalable vector graphics (SVG) paths as scatterplot marks, with axis labels rendered as rotated text. Data is loaded asynchronously from a remote CSV file using `d3.csv`, and the plot is fully configurable through a fluent interface that accepts dimensions, margins, and value accessor functions.

Ttrissentety
92% 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
91% match
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
91% 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
91% match
Loading thumbnail…

Scatter Plot with symbols

This scatter plot displays the Iris dataset, mapping sepal length and width to axes, with petal width encoded through point size and species indicated by both color and symbol shape. The visualization uses D3 v6’s modular functions, including `scaleLinear` for axes and `scaleOrdinal` for categorical mappings, with axes built using `axisLeft` and `axisBottom`. Points are rendered as SVG paths via the `symbol` API, transitioning to their final size over two seconds using `.transition()`. The example follows a reusable chart pattern, encapsulated in a callable `scatterPlot` function.

AAnupJoseph
91% match
Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This example shows a reusable scatter plot of the Iris dataset, where each flower is represented by a distinct symbol indicating its species. The plot maps petal width to the x-axis and sepal length to the y-axis, with axes added via d3.axisLeft and d3.axisBottom. The code implements a modular scatterPlot component using d3.scaleLinear for positioning, d3.scaleOrdinal with d3.symbols for shape encoding, and a chainable API for configuration. Data is loaded as CSV from a remote URL, and the entire visualization is rendered as SVG.

Nnim@brejnholt.dk
91% match