Skip to main content
SimilarExport ZIP
100%

Fork of Vanilla D3 Vibecoding Template

✓ Published1🌍 Public
Ssaisowjanyaedupuganti.24f@gmail.com
Last edited Oct 4, 2025
Created on Oct 4, 2025

A scatter plot visualizes the Iris dataset, comparing sepal length and width across three species. The chart uses colored circles to represent species, with an interactive legend that fades non-hovered points. It includes a title, subtitle, axis labels, and source attribution. Built with D3.js, the code uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and the `join` pattern for declarative SVG rendering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length and width across three species, with points colored by species and an interactive legend that highlights one species at a time. The chart uses D3.js APIs like `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render axes and scales, while `ResizeObserver` handles responsive resizing. Data loads from a CSV via `d3.csv`, and BBC-style colors are applied to distinguish each species.

Ssaisowjanyaedupuganti.24f@gmail.com
96% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three iris species. It uses D3.js with a declarative approach, leveraging D3’s `scale`, `axis`, and SVG selection APIs to draw axes, circles, and a hoverable legend. The chart is styled with a custom BBC-inspired color theme and loads data from a remote CSV, with interactivity that fades non-hovered species.

Bbodushivani2601@gmail.com
95% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length against sepal width across three species. The visualization uses D3.js methods like `scaleLinear`, `scaleOrdinal`, `extent`, `axisBottom`, and `axisLeft` to render the plot. An interactive legend highlights points of a selected species while dimming others, and hovering triggers opacity changes. The code loads the Iris data from a Gist URL via D3's `csv` parser and applies a BBC-inspired color theme for species differentiation.

SSainathreddypotu@gmail.com
95% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three species. Built with vanilla D3 (v7), it uses `scaleLinear` for axes, `scaleOrdinal` for species coloring against a BBC color palette, and `csv` for data loading. The chart supports interactive highlighting via a legend, which fades non-hovered points, implemented with D3's selection joins and a `ResizeObserver` for responsive sizing.

Ssowjanyateppali4202@gmail.com
95% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across three iris species. The visualization uses a D3.js SVG rendering approach, with points colored by species using a BBC-inspired color palette. The chart includes interactive features such as a hoverable legend that dims non-matching points, and the code demonstrates the use of `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleOrdinal` for scaling, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is sourced from Fisher's Iris dataset.

Ssravya7136@gmail.com
95% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes Fisher’s Iris dataset, comparing sepal length and width across three species of iris flowers. The chart uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to map quantitative dimensions and species colors, with points rendered as SVG circles. Hovering over legend items highlights the corresponding species by raising matching points and fading others, driven by shared state managed through a `ResizeObserver` for responsive layout.

Ssakethpapareddy@gmail.com
95% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example visualizes the Iris dataset, comparing sepal length and width across three species using a D3.js scatter plot. The chart uses `d3.csv` to load data from a remote source and `d3.scaleLinear` and `d3.scaleOrdinal` for positioning and color mapping. Interactive legend highlighting via mouse events fades non-hovered points, with the visual configuration controlled by a dedicated config file and stylized using BBC color themes.

224cs118@kpriet.ac.in
94% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes the Fisher Iris dataset, comparing sepal length against sepal width across three species. The chart uses custom D3.js code with `scaleLinear` for axes, `scaleOrdinal` for species colors, and `axisBottom` with `axisLeft` for ticks. The legend enables hover interactions that highlight one species while fading others. Data loads asynchronously from a CSV URL, with the visualization adapting to container resizing via `ResizeObserver`.

Ssravya7136@gmail.com
94% match