Skip to main content
SimilarExport ZIP
100%

Fork of Reusable scatter plot with different symbols

✓ Published0🌍 Public
NNikitha123171
Last edited Mar 25, 2023
Created on Mar 25, 2023

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.

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
97% 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
96% 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 flower samples. Different species are distinguished using distinct symbols applied via a d3.scaleOrdinal with an array of d3 symbols. The visualization uses D3 v6 APIs including d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.symbol. A reusable scatterPlot function configures margins, size, and accessor functions. Data is loaded as CSV and parsed before rendering as SVG paths within a full-window viewport.

NNeeharikaGali
96% 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
96% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot uses the Iris Dataset to visualize the relationship between petal width and sepal length, with each of the three flower species represented by a distinct symbol. D3.js v6.7.0 powers the visualization, employing `scaleLinear` for axes, `scaleOrdinal` for symbol assignment, and `symbol()` for mark generation. The reusable `scatterPlot` component draws SVG paths, includes left and bottom axes, and automatically scales to the browser window size.

0057SatvikDamera
96% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length for individual flower specimens. The code uses d3.scaleLinear for the x and y axes, d3.axisLeft, and d3.axisBottom for the chart's frame. Each species is represented by a distinct symbol, drawn via d3.symbol and d3.symbols, with the symbol type selected through a d3.scaleOrdinal mapping species values to available symbols. The visualization is rendered as an SVG using a reusable scatterPlot function that accepts width, height, data, margin, and size as configurable parameters, with the final output fitted to the window dimensions.

SsreepavanKothapalli
96% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the classic Iris Dataset, mapping petal width and sepal length to a scatter plot’s x and y axes. Each species is represented by a distinct symbol, chosen via an ordinal scale applied to the categorical data. The chart is built with D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` APIs. The reusable `scatterPlot` custom function encapsulates the chart’s configuration, including dimensions, margins, and symbol size, and renders the result as an SVG in a vanilla HTML page.

NNikitha123171
96% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the classic Iris Dataset, mapping petal width and sepal length to a scatter plot’s x and y axes. Each species is represented by a distinct symbol, chosen via an ordinal scale applied to the categorical data. The chart is built with D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` APIs. The reusable `scatterPlot` custom function encapsulates the chart’s configuration, including dimensions, margins, and symbol size, and renders the result as an SVG in a vanilla HTML page.

NNikitha123171
96% match