Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot with Symbols

✓ Published0🌍 Public
IIsabel Cayer
Last edited Jul 24, 2025
Created on Jul 24, 2025

This example presents a scatter plot of the Iris dataset, showing petal width against sepal length, with distinct d3 symbol shapes (circles, crosses, diamonds, etc.) encoding the different Iris species. It is built using a reusable `scatterPlot` function in D3 v6, which leverages `scaleLinear` for axes, `scaleOrdinal` to map species to symbols, and a `symbolGenerator` to render SVG paths. The plot reads the dataset from a remote CSV via `d3.csv`, displays axes using `axisLeft` and `axisBottom`, and supports configurable margins and symbol size through its fluent API.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This example visualizes the Iris dataset as a scatter plot, mapping petal width and sepal length along the axes while using distinct D3 symbols to differentiate iris species. The code renders SVG via a reusable `scatterPlot` function that takes configuration for dimensions, margins, and accessor functions. It uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` to assign `d3.symbols` shapes per species, and `d3.symbol` to generate path data. Axes are added with `d3.axisLeft` and `d3.axisBottom`, while data is loaded asynchronously with `d3.csv`.

Zzhuomo-maker
96% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This scatter plot visualizes the Iris Dataset, mapping sepal length against petal width with D3 v6. The code uses `d3.csv` to load data and `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes. A `d3.scaleOrdinal` and `d3.symbol` generator draw points as SVG paths, with symbol types based on species. The `scatterPlot()` function is reusable, configured via chained methods for dimensions, margins, and accessors.

AAlena
96% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols 2

This example displays the Iris dataset as a scatter plot, encoding petal width on the x-axis, sepal length on the y-axis, and species as distinct shapes using D3’s `symbol` API. It uses `scaleLinear` for axes, `scaleOrdinal` to map species to symbol types, and `axisBottom`/`axisLeft` for ticks. The plot is rendered as an SVG, sized to the full window, and loads data from a CSV URL via `d3.csv`. The reusable `scatterPlot` function configures margins, symbol size, and value accessors.

DDaveCumin
96% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris dataset as a scatter plot, mapping petal width and sepal length to the x and y axes. Each of the three iris species is represented by a distinct symbol from D3’s `symbol` and `symbols` APIs, with positions scaled using `scaleLinear` and axes drawn via `axisLeft` and `axisBottom`. The chart is built with a reusable `scatterPlot` function in D3 v6, rendering SVG shapes whose paths are generated by `symbolGenerator`, and loaded asynchronously from a CSV URL.

Ggeethanjalikotaru
96% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This visualization displays the Iris dataset as a scatter plot, showing the relationship between petal width and sepal length across three iris species. Each species is distinguished by a unique symbol shape, such as circles or triangles, generated using D3’s `symbol` and `scaleOrdinal`. The code uses D3 v7 functions like `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data, map positions, and render SVG axes. The chart is built as a reusable function, with margins and symbol size adjustable through its configuration API.

Yyisha huang
96% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This visualization renders the Iris Dataset as an interactive scatter plot, mapping petal width and sepal length along the x and y axes. It distinguishes the three flower species through different symbol shapes (circles, crosses, and diamonds) rather than colors, using d3.scaleOrdinal and d3.symbol. Built with D3 v6, the reusable scatterPlot function chains configuration methods for data, value accessors, margins, and symbol size. The SVG output includes axis labels via d3.axisLeft and d3.axisBottom, with the plot sized to fill the browser window. Data is loaded asynchronously from a remote CSV using d3.csv.

KKamilPodsiadlo
95% match
Loading thumbnail…

Reusable d3 Scatter Plot with Symbols

This example shows a scatter plot of the Iris dataset, using distinct D3 symbols (circles, crosses, diamonds, etc.) to represent different species based on petal and sepal length. The visualization is built as a reusable `scatterPlot()` function that accepts configurable accessors for x, y, and symbol values, along with margins and symbol size. It relies on `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` to render SVG paths, fetching data from a CSV via `d3.csv` and styled with custom CSS.

AAndrea Mignone
95% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This example visualizes the Iris Dataset as a scatter plot, mapping petal width and sepal length. It uses a reusable D3 scatter plot module that applies a linear scale for axes and an ordinal scale to map the three iris species to distinct symbol shapes. The plot draws SVG symbols for each data point and adds left and bottom axes. Data is loaded asynchronously with d3.csv from a remote URL, and the code demonstrates a modular, extensible pattern for building configurable charts.

Rradhadevarapu
95% match