Fork of Reusable D3 Scatter Plot with Symbols

100%

Fork of Reusable D3 Scatter Plot with Symbols

✓ Published0🌍 Public

Last edited Mar 11, 2023

Created on Mar 11, 2023

Forked from Reusable D3 Scatter Plot with Symbols

This scatter plot displays iris flower measurements, mapping petal width against sepal length and encoding species with distinct symbols. It uses a reusable D3 module pattern with `scaleLinear`, `scaleOrdinal`, and D3’s symbol generators to render SVG paths. Data is loaded from a CSV via `d3.csv`, parsed into numeric values, and plotted with axes generated by `axisLeft` and `axisBottom`. The chart fills the viewport and uses a margin-based layout for responsive positioning.

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. 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

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

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.

IIsabel Cayer

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

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

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

93% match

Loading thumbnail…

Fork of Reusable D3 scatterplot with symbols

This example presents a reusable D3.js scatterplot that visualizes the classic Iris flower dataset, encoding species with distinct SVG symbols (circles, crosses, and diamonds) via a d3.scaleOrdinal mapping to d3.symbols. The chart maps petal width to the x-axis and sepal length to the y-axis using d3.scaleLinear, with axes generated by d3.axisBottom and d3.axisLeft. The code demonstrates a modular chart factory pattern, where configuration methods like .width(), .data(), and .symbolValue() are chained to customize the plot, following the margin convention and rendering data-loaded CSV values as SVG path elements.

BBart van Pelt

93% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the x and y axes, with each species represented by a distinct D3 symbol shape. Built as a reusable D3 module, it uses `scaleOrdinal` to assign symbols, `scaleLinear` for axes, and `symbolGenerator` to generate SVG paths. The code draws axes with `axisLeft` and `axisBottom`, and loads data asynchronously via `d3.csv`.

SSravaniPosina

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

93% match