Scatter Plot with symbols

100%

Scatter Plot with symbols

✓ Published0🌍 Public

Last edited Jul 1, 2021

Created on Jul 1, 2021

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.

AI-generated description

A scatterplot with Towards Reusable Charts patterns

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 with Symbols

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.

Ggeethanjalikotaru

91% match

Loading thumbnail…

Scatter Plot with Shape

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each of the three iris species distinguished by a distinct symbol shape. A legend encoded with the same shapes identifies the species. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` to position and shape the data points, alongside `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file and parsed with `csvParse`, with symbols rendered using `symbolGenerator.type().size()`.

CCurran Kelleher

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

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

90% match

Loading thumbnail…

Scatter Plot with Shape

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol shape. The visualization loads CSV data via `fetch`, parses it with `d3.csvParse`, and renders circular, triangular, and other shapes using `d3.symbol` and `symbolsFill`. A custom shape legend, built with `scaleOrdinal`, identifies species, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart updates responsively to the browser window size.

Cchsaisriharsha@gmail.com

90% match

Loading thumbnail…

Reusable scatter plot with different symbols

This example presents a reusable scatter plot comparing sepal length and petal width from the Iris dataset. It uses a D3 v6 SVG rendering with `scaleOrdinal` to assign one of the `symbols` shapes to each iris species, and `symbol().size()` to generate the path data for the data points. The chart’s axes are created with `axisLeft` and `axisBottom` from a linear scale. The `scatterPlot` function is modular, allowing configuration of data, margins, size, and value accessors through its getter-setter methods, which are invoked via `selection.call()`.

Bbhanuteja1807@gmail.com

89% match

Loading thumbnail…

Dynamic sPlot with symbols

This dynamic scatter plot visualizes the Iris Dataset, mapping petal width against sepal length while encoding the three iris species with distinct D3 symbol shapes. The visualization uses `d3.scaleLinear` and `d3.scaleOrdinal` to position points and assign symbols, with `d3.axisLeft` and `d3.axisBottom` providing labeled axes. Each data point renders as an SVG path generated by the `d3.symbol` generator, sized at 100 pixels squared, and the chart updates transparently when the dataset or encoding functions change through its reusable `scatterPlot` module.

DDonald Bagwell

89% match