Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot with Symbols

✓ Published0🌍 Public
NNikhilchiguru-8
Last edited Mar 12, 2023
Created on Mar 12, 2023

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length. It uses D3 v6 APIs such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render axes, while `symbol` and `symbols` generate distinct markers for each iris species. The reusable `scatterPlot` function configures scales, margins, and encoding via method chaining. Data loads asynchronously from a GitHub Gist CSV, with numeric parsing applied to all measurements. SVG output adapts to the full viewport size.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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. The built-in axes provide scale context, and the plot adapts to the window size. It uses D3's `scaleLinear` for positioning, `scaleOrdinal` to assign symbols from the `symbols` set, and `symbol()` to generate the paths for each data point. The code loads the dataset via `csv` and applies the reusable scatter plot module through a chained `.call()` method.

NNikitha123171
95% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This fork of a reusable D3 scatter plot visualizes the Iris dataset, mapping petal width and sepal length along the x- and y-axes. It uses `d3.scaleOrdinal` and `d3.symbol` to assign distinct geometric symbols to each iris species, rendering them as SVG paths. The plot also includes `d3.axisLeft` and `d3.axisBottom` for labeled axes. The code is built as a modular `scatterPlot()` function with configurable accessors, demonstrating a reusable chart pattern in D3 v6.

NNikitha123171
95% 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
94% 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
94% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length and encoding species with distinct D3 symbols. The visualization uses a reusable `scatterPlot` function that leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` to render SVG paths. The dataset is loaded as CSV via `d3.csv` and parsed into numeric values. Axis tick labels are styled at 24px, with the plot filling the entire browser window.

SSharanyaSriram
94% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This D3.js scatter plot visualizes the Iris dataset, mapping petal width on the x-axis and sepal length on the y-axis. Each species is represented with a distinct symbol, determined by the `scaleOrdinal` and `symbols` APIs, with all points rendered at a fixed size. The visualization uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and `symbol().size()` to generate SVG paths. Data is loaded from a CSV via `d3.csv`, and the plot is drawn into a full-window SVG.

0057SatvikDamera
94% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width to sepal length for individual flowers. It uses the d3.scaleLinear and d3.scaleOrdinal APIs to position points and assign distinct symbols to each species. The d3.symbol and d3.join methods render the SVG marks, with axes generated by d3.axisLeft and d3.axisBottom. The visualization demonstrates a reusable D3 module that accepts configuration for data, dimensions, margins, and symbol size.

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