shuttle

100%

✓ Published0🌍 Public

Last edited Oct 2, 2025

Created on Oct 2, 2025

Forked from Vanilla D3 Vibecoding Template

This visualization displays the Iris dataset as a scatter plot comparing sepal length against sepal width, with species shown as colored points and an interactive legend that fades non-hovered categories. The visualization uses d3.csv to load data from a CSV file, d3.scaleLinear for both axes, and d3.scaleOrdinal for color encoding. It includes a legend with mouseenter and mouseleave events that trigger opacity changes to highlight selected species. The code also uses d3.axisBottom and d3.axisLeft for chart axes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris flower dataset, comparing sepal length to sepal width across three species encoded by color. The visualization uses D3 v7’s scaleLinear, axisBottom, and axisLeft to construct the chart, with an ordinal color scale for species classification. Rendered as SVG, it includes a manually drawn legend and gridlines, reading data from a local CSV file through d3.csv. The chart demonstrates ES6 module imports and loading D3 via UNPKG.

YYi-Qing

82% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the classic Iris dataset, displaying sepal length against sepal width for three species of iris flowers. Each point represents a sample, color-coded by species (setosa, versicolor, virginica) using blue, green, and orange, and includes interactive tooltips that reveal exact measurements on hover. The visualization is built with D3.js v7, using `d3.csv` to load the local CSV data, `d3.scaleOrdinal` for color mapping, and `d3.scaleLinear` to map data to pixel coordinates. The SVG rendering includes labeled axes, a legend, and smooth tooltip transitions for enhanced readability.

LLikhitaMudagereShivaraj@my.unt.edu

81% match

Loading thumbnail…

ice6barchart shivani

This scatter plot visualizes the Iris dataset, comparing sepal length and width across three flower species with color-coded points. The chart includes hover interactivity through its legend, which highlights and fades points by species. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render the SVG visualization, with data loaded from a CSV via `d3.csv`.

Bbodushivani2601@gmail.com

81% match

Loading thumbnail…

iris dataset

This scatterplot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each data point colored by flower variety. The code uses d3.csv to load the data, d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks and gridlines, and d3.scaleOrdinal to map varieties to a color palette. The SVG rendering includes axis labels, a title, and circles positioned using d3-selection.

SShweta-tech

81% match

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Three species are distinguished by color, with data points smoothly animating to new positions when the axis selection changes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to render the plot, alongside a custom dropdown menu system. The chart transitions circle positions using `transition().duration(1000)`, with SVG rendering for all graphical elements.

Sshialian

81% match

Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris Dataset, displaying sepal length on the x-axis and sepal width on the y-axis, with each point colored by species (Iris-setosa, Iris-versicolor, or Iris-virginica). The visualization uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and additional petal length and width values determine each circle’s radius properties. The plot fills the browser window, with styled tick labels and axis text.

DDineshK2602

81% match

Loading thumbnail…

act6 t3.2

This example visualizes the Iris dataset as a scatter plot, showing sepal length against petal length for different species. The species are distinguished using different symbols via a categorical color scale and a shape legend with tick marks. The visualization is built with D3 v7, using scaleLinear, scaleOrdinal, symbol, axisLeft, and axisBottom. Data is loaded asynchronously from a CSV file using d3.csvParse and rendered into an SVG, with modular functions for axes, scatter plot, and legend composition.

Sshravan.s0710@gmail.com

81% match

Loading thumbnail…

2222333

An interactive scatter plot of the Iris dataset lets users compare any two measured attributes—sepal and petal length and width—via dropdown menus. Points are colored by species with a legend for classification. The visualization uses D3 v7 to load the CSV data, render SVG circles and axes with d3.scaleLinear and d3.axisBottom/Left, and updates the chart on selection change.

Eeyxxr1260@gmail.com

81% match