Skip to main content
SimilarExport ZIP
100%

Fork of Vanilla D3 Vibecoding Template

✓ Published0🌍 Public
224cs077@kpriet.ac.in
Last edited Jul 30, 2025
Created on Jul 30, 2025

This visualization displays Fisher's Iris dataset as an interactive scatter plot, mapping sepal length and width against each other with species indicated by color. The chart includes hover interactions via the legend, highlighting points of matching species while fading others. It uses D3 v7 APIs such as `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and a `ResizeObserver` for responsive layout. Data loads asynchronously from a CSV via `d3.csv`, with styling informed by BBC color themes and configurable visual properties.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes Fisher's Iris dataset, comparing sepal length and width across three iris species, with data points colored by species. The visualization includes a legend that filters and highlights points on hover, dimming non-selected species through opacity changes. Built with vanilla D3.js (v7), the code uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` for scales and axes, while leveraging a ResizeObserver for responsive layout. The BBC-style color scheme and typography are applied via CSS classes, with data loaded from a remote CSV file.

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

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot examines Fisher’s Iris dataset, mapping sepal length against sepal width for three species. Points are colored by species using a BBC-inspired palette, with a legend enabling hover highlighting that fades non-selected points. Built with D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and a `ResizeObserver` for responsive dimensions. All styling and layout parameters are configured centrally in `config.js`, and data loads asynchronously from a CSV via `d3.csv`.

Ssandyman2109@gmail.com
96% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes Fisher's Iris dataset, comparing sepal length and width across three iris species, colored by species and featuring interactive hover highlighting through the legend. Built with vanilla D3 v7, it uses `d3.csv` to load data, `scaleLinear` and `scaleOrdinal` for scales, and `axisBottom`/`axisLeft` for axes. The implementation includes a responsive layout via `ResizeObserver`, with points styled via CSS classes per species and a custom legend that fades non-hovered points.

Pprasadchitransu@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 interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three species with color-coded points and a hoverable legend that fades non-selected species. Built with D3.js v7, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render axes and points, while a `ResizeObserver` handles responsive dimensions. The chart loads CSV data via `d3.csv`, applies BBC-inspired styling from a theme object, and supports smooth state management through VizHub's reactive container pattern.

Kkhushburajan2015@gmail.com
95% match
Loading thumbnail…

Fork of Fork of Fork of Vanilla D3 Vibecoding Template

This example shows a scatter plot of Fisher’s Iris dataset comparing sepal length and sepal width across three species, with interactive legend highlighting that fades non-hovered points. The visualization uses D3 v7’s `csv`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to load data, map scales, and render axes. A `ResizeObserver` enables responsive scaling, while a BBC-inspired color theme distinguishes species. The data is fetched from a remote CSV URL, and points are styled via CSS classes based on species.

Ssaisowjanyaedupuganti.24f@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