Skip to main content
SimilarExport ZIP
100%

Vineela

✓ Published2🌍 Public
VVineela Reddy
Last edited Mar 29, 2023
Created on Mar 29, 2023

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.

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
91% 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
90% match
Loading thumbnail…

Fork of 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.

VVineela Reddy
90% match
Loading thumbnail…

Iris dataset scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping measurements like petal width and sepal length across three flower species. Using D3.js with an SVG rendering and animation, the chart automatically cycles through different x-axis variables every 15 seconds, updating the visualization via a reusable scatterPlot function. The code employs d3.scaleLinear for axes, d3.scaleOrdinal for symbol types, and d3.symbol to render distinct species markers, with data loaded asynchronously from a CSV source.

Ggayathrikavya
86% match
Loading thumbnail…

ic7 divya scattered plot

This interactive scatter plot visualizes the Iris dataset, showing how petal width and sepal length relate across three flower species. Built with D3.js, the visualization uses an animated SVG display that cycles through different variable pairings every two seconds, while a color-coded legend distinguishes setosa, versicolor, and virginica species. The code implements a reusable scatter plot API with `scaleLinear`, `scaleOrdinal`, and `axisLeft` functions, rendering circles with dynamic sizing based on additional sepal dimensions. Data is loaded from a CSV file hosted on GitHub Gists, and the entire visualization adapts to the browser window dimensions.

Ddivyagunuguntla
86% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis, with points colored by species (setosa, versicolor, and virginica). Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load data, `scaleLinear` and `extent` to set scales, and `axisLeft` and `axisBottom` for axes. Circle marks are appended via `data().join()`, with a custom color mapping function for each species. The plot fills the browser window and includes labeled axes.

KK V VINITHA
85% match
Loading thumbnail…

question 3

This visualization displays the Iris dataset as a D3 scatter plot, mapping petal width against sepal length for individual flower samples. The code uses d3.csv to load the data from a GitHub Gist, then applies scaleLinear, scaleOrdinal, axisLeft, and axisBottom to construct the chart. Each data point is rendered as a distinct SVG symbol generated with d3.symbol and colored by species. The visualization includes labeled axes and is implemented as a reusable scatterPlot component.

Hharipriyaa07
85% match
Loading thumbnail…

Iris Dataset Scatter Plot

This D3.js scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each point represents an iris flower, colored by species (setosa in chartreuse, versicolor in orange, and virginica in blue). The code loads data from a CSV file via `d3.csv`, uses `scaleLinear` for axes, and renders circles as SVG elements. Axes are generated with `axisLeft` and `axisBottom`, while text labels for the axes are appended separately.

VVaishnavi6199
85% match