Skip to main content
SimilarExport ZIP
100%

Fork of reuable sPlot with symbols

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

This example presents a scatter plot of the Iris dataset, mapping petal width against sepal length and distinguishing the three flower species through different D3 symbol shapes. It uses a reusable `scatterPlot` function built with D3 v7 APIs such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` to generate the SVG paths. Data is loaded asynchronously via `d3.csv` and parsed into numeric values. The visualization renders directly to the browser window with SVG output, featuring adjustable margins and symbol sizing.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This D3.js scatter plot visualizes the Iris dataset, 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 the `d3.symbols` collection, using the `scaleOrdinal` scale. The visualization uses `scaleLinear` for axes, `axisLeft`, and `axisBottom` for ticks, and renders as an SVG. The code creates a reusable `scatterPlot` function that accepts data, value accessors, and margin settings, with data loaded from a CSV file.

DDonald Bagwell
94% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example displays the Iris Dataset as a scatter plot, mapping petal width and sepal length to x and y positions while encoding species with distinct D3 symbols. The code uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for scales, and the d3.symbol API to generate path shapes. Axes are rendered with d3.axisLeft and d3.axisBottom. The visualization is a reusable module, created via a custom scatterPlot function that is called once within an SVG container sized to the viewport.

Nnsatyaprakash22
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 scatter plot with different symbols

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length for three species. The plot encodes species identity through distinct D3 symbols, including a custom square symbol, and uses D3’s `scaleLinear` for axes and `scaleOrdinal` for symbol mapping. Data is loaded via `d3.csv` and rendered as SVG paths, with axes generated using `axisLeft` and `axisBottom`.

Pprachow
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 for individual flowers while encoding species with different D3 symbols. The reusable `scatterPlot` function uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` to assign symbols from the `d3.symbols` collection, and `d3.symbol().size()` to generate paths. Data is loaded via `d3.csv`, and the plot renders in SVG with axes created by `d3.axisLeft` and `d3.axisBottom`.

Ssnehareddygurram
93% 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 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 scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and using distinct symbols for each species. It uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols` to render SVG paths, with axes generated via `axisLeft` and `axisBottom`. The chart is built through a reusable `scatterPlot` function configured with margin, size, and accessor methods. Data is loaded as CSV from a GitHub gist and parsed into numeric values.

Vvamshisoletii
93% match