Automobiles

100%

✓ Published1🌍 Public

Last edited Oct 5, 2025

Created on Oct 5, 2025

Forked from Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length and width across three species. The code uses D3's `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to construct the chart, with points styled via CSS classes. Interactive legend items trigger hover states that adjust point opacity. Data loads from a CSV via D3's `csv` parser, and a `ResizeObserver` handles responsive sizing.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Automobiles

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three species of iris flowers. The visualization uses d3.scaleLinear and d3.scaleOrdinal to map data points, with hover interactions that highlight the selected species while fading others. Points are rendered as large circles with BBC-inspired color theming, and a custom legend provides interactive filtering. The chart displays titles, axis labels, and source attribution, all styled through CSS and configured via a centralized config object. The code also employs a ResizeObserver for responsive rendering.

Llohitsai.nikkil@gmail.com

91% match

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot displays the Iris dataset, showing how sepal and petal measurements differ across three iris species. Users select which measurements to plot on each axis via dropdown menus, and the chart redraws with semi-transparent colored circles representing each species. The visualization uses D3.js version 5 with SVG rendering, employing d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.csv to load the data from a local CSV file. A static HTML legend outside the SVG maps species names to red, green, and blue circles.

Hhenry8966

87% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationships between sepal and petal dimensions across three Iris species. Colored circles represent individual flowers, with distinct colors for Iris-setosa, Iris-versicolor, and Iris-virginica. The visualization is interactive, allowing users to select which measurements appear on the x and y axes through dropdown menus. Hovering over the legend highlights all points of a corresponding species by increasing their opacity. The code uses D3.js version 5, with functions like `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for rendering axes, and `transition` for smooth animations when the data is re-rendered or filtered. Data is loaded from a CSV file, and the SVG canvas is dynamically updated with new points and axes.

LLê Minh Bằng

87% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the Iris flower dataset, showing relationships between sepal and petal measurements. Interactive dropdown menus let the user select which measurements appear on the x- and y-axes, redrawing the plot with D3 scales and axes. The code uses d3.csv to load the data, d3.scaleLinear for positioning, and d3.axisBottom/axisLeft for grid lines and tick labels. Circles are rendered as SVG elements with fixed red opacity. The visualization originates from the UCI Machine Learning Repository’s Auto MPG dataset, though the loaded data is the Iris dataset instead.

Ccpsu00

86% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot displays the classic Iris dataset, showing sepal length and sepal width for three flower species, with each species color-coded (blue, red, green) as points on an SVG canvas. The visualization is built with D3 v5, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for grid lines, and `csv` to load the data from a local file. The code calculates the value ranges dynamically with `extent` and applies `.nice()` for axis scaling, while circle opacity is set globally via CSS.

Bbrad1024

86% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between sepal width and sepal length for iris flowers, using data from the UCI Machine Learning Repository. The code employs D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, map values to coordinates, and render the axes and circles as SVG elements. The visualization is generated from the raw IRIS dataset, with circles styled red and semi-transparent.

Aalan489671

86% match

Loading thumbnail…

d3.js project

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three iris species. The visualization uses D3.js's `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to create a fully rendered SVG chart. It includes a hoverable legend that highlights points from a selected species by raising them and fading the others. The styling uses BBC-themed colors for the data points, with the data loaded from a CSV file via the `csv` function.

Ssowjanyateppali4202@gmail.com

86% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length, with circle radius encoding sepal width. The data is loaded via d3.csv from a remote gist and rendered as SVG circles. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom with grid lines, and custom axis labels and a title. Points are semi-transparent red circles, with axes styled through CSS.

Kkkkk

86% match