Skip to main content
SimilarExport ZIP
100%

Fork of Vanilla D3 Vibecoding Template

✓ Published0🌍 Public
SSYAM TEJ
Last edited Oct 15, 2025
Created on Oct 15, 2025

This interactive scatter plot compares sepal length and width across Iris species, with filters for selecting numeric columns and a categorical color dimension. It loads CSV data via the `d3.csv` API and maps columns to user-chosen fields. The visualization uses SVG rendering with D3 v7, featuring axes via `d3.axisBottom` and `d3.axisLeft`, ordinal color scaling, and hover tooltips. Users can also render a legend and resize the chart through a ResizeObserver.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three iris species using a custom color scale. The chart loads CSV data via `d3.csv` and renders SVG circles with configurable radius, opacity, and stroke. A legend with hover interactions dims non-matching points using `mouseenter` and `mouseleave` events. The visualization uses d3 scales for axes and the ResizeObserver API to adapt to container dimensions.

Ssowjanyateppali4202@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 against sepal width across three flower species using a BBC-inspired color palette. The D3 v7 code loads CSV data via `d3.csv` and builds the chart with `scaleLinear`, `scaleOrdinal`, and axis components. Interactive legend filtering uses hover events to fade non-matching points, with the theme and layout configured through a separate config module.

Bbodushivani2601@gmail.com
94% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across three species. Points are colored by species, with hover interactions on the legend fading non-matching points. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs. Data is loaded via `d3.csv` from a remote CSV file, and the chart includes a title, subtitle, axis labels, and a source attribution.

MManeesh Kumar
94% 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
94% 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
94% 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
94% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This visualization displays the Iris dataset, comparing sepal length and width across three species using a color-coded scatter plot with an interactive legend. The chart loads data from a CSV file via `d3.csv`, uses `scaleLinear` and `scaleOrdinal` for axes and color mapping, and includes axis labels, title, and source attribution. Hovering over legend items triggers fade effects on non-matching points while raising selected species to the front. The implementation uses modular D3 functions for rendering, dimension observation with `ResizeObserver`, and a BBC-inspired color theme.

Nnaveenkumar.m@kpriet.ac.in
94% match