Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
AAbhiram-Janagama
Last edited Mar 9, 2026
Created on Mar 9, 2026
Forked from HTML Starter

A scatter plot visualizes the Iris dataset, comparing sepal length against petal length. Each flower is a semi-transparent tomato-colored circle, plotted with D3.js v7. The visualization uses `d3.csv` to load the data, `d3.scaleLinear` for the x and y axes, and `d3.extent` for domain calculations. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the SVG output includes a title and axis labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length for each flower. The code uses D3 v7 to load the CSV data, creates linear scales for both axes, and renders individual tomato-colored circles. SVG is used for the chart, with D3’s axis generators adding labeled bottom and left axes, plus a chart title.

Yyazneshpara2@gmail.com
96% match
Loading thumbnail…

Fork of HTML Starter

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length for 150 flowers. Each point is colored by species—setosa, versicolor, and virginica—using a D3 ordinal color scale with blue, orange, and green. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render ticks. A legend identifies the three species, and the SVG rendering includes labeled axes and semi-transparent circles.

YYamini Malikireddy
94% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays a scatter plot of the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. It uses D3.js v7’s declarative API, including `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom`, within a minimal HTML page. The SVG canvas fills the browser window, with circles sized at radius 5. Data is fetched as CSV from a remote Gist and parsed into numeric fields before being scaled and rendered. The example demonstrates a concise, modern D3 workflow for building interactive plots.

Mmauleendertse@gmail.com
92% match
Loading thumbnail…

Fork of HTML Starter

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis, petal length to the y-axis, and species to point shapes. It uses the D3.js v7 library with the `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to position and render the marks. The visualization also incorporates `axisLeft` and `axisBottom` for chart axes, and a custom shape legend generated with `symbolGenerator`. Data is loaded asynchronously from a CSV file using `csvParse` and rendered into a responsive full-viewport SVG.

Ssahithya.voleti@gmail.com
91% match
Loading thumbnail…

Fork of HTML Starter

The visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis and sepal width on the y-axis for 150 samples. Each point is color-coded by species (setosa, versicolor, virginica), with tooltips revealing the exact measurements on hover. Built with D3 v7, the SVG chart uses `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and `d3.axisBottom`/`d3.axisLeft` for ticks. A legend and animated tooltip transitions provide clear interaction.

Mmadalahyndavi123@gmail.com
91% match
Loading thumbnail…

Fork of HTML Starter

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. It uses D3 v7’s `csv` loader to fetch and parse the data, then renders circles with `scaleLinear`, `extent`, and axis helpers `axisLeft` and `axisBottom`. The plot is drawn as SVG, sized to the browser window, with fixed margins and no interactivity.

GGT-GillesTeuwen
90% match
Loading thumbnail…

Fork of D3 Starter

This visualization demonstrates a scatter plot of the Iris dataset, mapping petal length against sepal length with circular marks. The code uses D3 version 7 with the `d3-selection-multi` extension to simplify attribute setting. It employs `scaleLinear` for axes, `extent` for domain calculation, and `axisLeft`/`axisBottom` for rendering ticks. The reusable `scatterPlot` function exposes setter methods for width, height, data, margins, and accessor functions, following a module pattern. The data is loaded asynchronously from a CSV file via `d3.csv`, with numeric parsing applied to each row before rendering as SVG circles.

Aatmr0
90% match
Loading thumbnail…

Fork of HTML Starter

This example shows a scatterplot of the Iris flower dataset, mapping petal length on the x-axis and sepal length on the y-axis. It loads CSV data with `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to set scales, and renders circles as SVG marks. Axes are added with `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window and is built with D3 v7 in a plain HTML page, with no React integration despite the metadata suggesting a fork.

Aaidarshafeev1@gmail.com
89% match