Fork of Reusable scatter plot with different symbols

100%

Fork of Reusable scatter plot with different symbols

✓ Published1🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

Forked from Reusable scatter plot with different symbols

This example visualizes the Iris dataset as a scatter plot, encoding petal width and sepal length on the x- and y-axes. Different species are distinguished using D3 symbols (circles, crosses, and diamonds) with red, green, and blue fills. The code builds the chart with a reusable `scatterPlot` function that leverages d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisLeft/axisBottom. A legend shows each species with its corresponding symbol and color. The SVG rendering and margins are configured in the main script.

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

97% 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 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 example visualizes the Iris Dataset as an interactive scatter plot, mapping petal length and sepal width to the x and y axes while encoding species with distinct symbols. It uses a reusable D3 module pattern, with the `scatterPlot` function configuring scales, axes, and symbol generation. The code leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisBottom`/`axisLeft` to render SVG paths for each data point, sized at 100 pixels. The plot fills the window and fetches data from a GitHub Gist URL using `d3.csv`.

SSANEEM MOHAMMAD

96% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example is a reusable scatter plot that visualizes the Iris Dataset, using distinct symbols to represent different species. The plot maps petal width to the x-axis and sepal length to the y-axis, with axis labels rendered via `d3.axisLeft` and `d3.axisBottom`. The implementation leverages `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate SVG paths for each data point. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed with a custom row handler. The plot’s dimensions adapt to the browser window, and styling is applied through a linked stylesheet.

Bbhanuteja1807@gmail.com

96% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris Dataset with a scatter plot that maps petal width to the x-axis, sepal length to the y-axis, and encodes the iris species using different symbols. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render SVG paths for the marks and axes. The plot fills the entire browser window, with margins adjusted for labels. The code is structured as a reusable `scatterPlot` function that accepts configuration for data, dimensions, and value selectors.

NNeeharikaGali

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

This example presents the classic Iris dataset as a reusable D3 scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Different species are distinguished through distinct SVG symbols, generated using D3’s `symbol` and `scaleOrdinal`. The visualization is built with a reusable `scatterPlot` function, which configures linear scales, axes, margins, and symbol size. Data is loaded as CSV via D3’s `csv` method, and the plot updates the DOM by joining path elements. The output is a clean, interactive-free scatter chart rendered as SVG.

LLakshmiManjushaReddyYarreddu

96% match