Fork of Vineela

100%

Fork of Vineela

✓ Published1🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

Forked from Vineela

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and encoding species membership with red, violet, and orange markers. The D3.js v6 code loads CSV data from a GitHub gist, using `scaleLinear` for axes, `scaleOrdinal` for symbol types, and custom fill colors assigned per species. SVG rendering displays circular marks with translations for each data point, while the `scatterPlot` module wraps reusable axis and mark-generation logic.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vineela

This D3.js v6 scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the x and y axes while encoding species with custom symbols and colors. The implementation uses the `csv` function to load data and a reusable `scatterPlot` module built with `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol`. Markers are rendered as SVG paths, with fill colors determined by a switch statement that assigns red, violet, and orange to the three iris species. The plot fills the entire browser window and includes labeled axes.

VVineela Reddy

97% match

Loading thumbnail…

Fork of Fork of Vineela

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length along the axes. Each flower species—setosa, versicolor, and virginica—appears as a distinct colored symbol, with red, violet, and orange fills respectively. The visualization uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` generators, rendering as SVG. Data loads from a CSV via `d3.csv`, and the code assigns colors through a custom `marker` function based on species.

VVineela Reddy

96% match

Loading thumbnail…

Vineela

This interactive D3.js scatter plot visualizes the Iris dataset, displaying sepal length against petal width while encoding species through both color and symbol shapes. The visualization renders SVG paths using d3.symbol() with distinct markers for setosa, versicolor, and virginica species. It implements custom scales via d3.scaleLinear and d3.scaleOrdinal, with axes generated through d3.axisLeft and d3.axisBottom. The plot fills the entire browser window and updates dynamically when the dataset loads from a remote CSV source.

VVineela Reddy

90% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This visualization shows the classic Iris dataset as a scatter plot, mapping petal length and width for three flower species colored blue, red, and black. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select`. It loads the dataset from a GitHub gist URL, parses numeric fields, and renders circles as SVG elements sized by sepal measurements. The axes display species separation, with circle positions computed via linear scales that map data values to pixel coordinates across the full window dimensions.

SSreejaBellamkonda

88% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width on the x- and y-axes, with each point colored by species (green, blue, or red). Built with D3 v6 and SVG, it uses `d3.csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes. The code also reads sepal measurements but does not use them visually. Data is loaded from a GitHub-hosted CSV file, and the chart fills the browser window with fixed margins and 24-pixel tick labels.

Llikith1266

87% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). The code loads CSV data using D3’s `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG elements. Axes are generated via `d3.axisLeft` and `d3.axisBottom`, and the plot fills the browser window using `window.innerWidth` and `window.innerHeight`. The data is sourced from a GitHub gist containing iris measurements.

Ssaiteja0725

87% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width onto the x- and y-axes. Each point is colored by species—green, orange, or brown—using a custom marker function. Built with D3 v6, the SVG chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Data is loaded via `d3.csv` from a GitHub gist, with numeric fields parsed on ingestion. The visualization fills the screen and includes axis labels for petal length and sepal length.

BBajiSharifPatan@my.unt.edu

87% match

Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This visualization displays the Iris Dataset as a scatter plot, mapping petal length and width to the x and y axes while encoding species as color. It reads CSV data via `d3.csv`, uses `d3.scaleLinear` with `d3.extent` to set domains, and renders SVG circles with `d3.axisLeft` and `d3.axisBottom`. Each point also carries sepal measurements as attributes, though these are not visually encoded. The plot dynamically sizes to the window and uses a 24px tick font for readability.

Ppreethamkesa

87% match