Skip to main content
SimilarExport ZIP
100%

Dynamic sPlot with symbols

✓ Published0🌍 Public
DDonald Bagwell
Last edited Nov 28, 2023
Created on Nov 28, 2023

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Dynamic D3 Scatter Plot visualization

This dynamic scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with distinct d3 symbol shapes. The SVG visualization uses d3.csv for data loading, d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols for categorical markers, and d3.axisLeft/axisBottom for gridlines. It implements a reusable scatterPlot function with configurable accessors, margins, and symbol size, rendering marks as SVG path elements with translations. The plot fills the browser window and includes styled tick labels.

UUzoemeka Okechukwu Innocent
91% match
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
90% 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
89% 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
89% 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
89% 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
89% 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
89% 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
89% match