Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 1, 2026

Created on Sep 30, 2026

This D3.js (v7) visualization displays flower measurements as a scatterplot, mapping petal length onto the horizontal axis, petal width onto the vertical axis, and encoding flower height through point area while using color for the categorical flower type. The SVG chart, rendered within a 900×520 canvas, loads data from a remote CSV using `d3.csv`, then sets up linear axes via `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`. A summary block above the plot reports row count, data fields, value ranges, and the mean and median for petal length, computed with `d3.mean`, `d3.median`, and `d3.extent`.

AI-generated description

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Fork of HTML Starter

This area chart visualizes the average height of flowers across three size categories—small, medium, and large—from the first 120 rows of the Flower Dataset. The code uses d3.csv to load the data, d3.rollups and d3.mean to aggregate average heights, and d3.scalePoint with d3.scaleLinear to map the categorical size labels and continuous height values. The visualization renders an SVG area and line path using d3.area and d3.line with a monotone curve, plus circle elements for data points and d3.axisBottom and d3.axisLeft for the axes.

Rrajivkarri98@gmail.com

86% match

Loading thumbnail…

Fork of 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.

AAbhiram-Janagama

85% 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

85% match

Loading thumbnail…

Fork of HTML Starter

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis while coloring each point by species (setosa, versicolor, virginica). The code loads the CSV data via D3's `d3.csv`, uses `scaleLinear` for both axes, and renders SVG circles with species-specific fills. Axis labels and ticks are generated using `axisLeft` and `axisBottom`, with the chart sized to the full window. This is a React-based D3 v6 example, rendered entirely in SVG.

Ssahithya.voleti@gmail.com

85% match

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

84% 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

84% 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

83% match