Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

This visualization combines a multi-series line chart and a grouped bar-and-line chart to explore the Iris dataset. The top chart plots sepal length against petal length for each species, using d3.line paths and a d3.scaleOrdinal color legend. The bottom chart displays average sepal and petal widths per species using d3.scaleBand rectangles for bars and a d3.line path with circles for the petal-width trend. All data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and rendered as SVG with axes from d3.axisBottom and d3.axisLeft.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with points colored by species. Using d3.csv to load the data, it employs d3.scaleLinear for both axes and d3.scaleOrdinal with d3.schemeTableau10 for color encoding. The SVG output includes axes via d3.axisBottom and d3.axisLeft, interactive hover tooltips through appended circles and title elements, plus a legend and axis labels. The chart is rendered entirely with d3.v7 and SVG elements.

AAnurup Reddy

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

88% match

Loading thumbnail…

Fork of D3 AI Template

This visualization displays the Iris flower dataset as a scatter plot, comparing sepal length against sepal width across three species. Each flower is represented as a colored circle, with a legend enabling interactive highlighting through opacity changes. The code builds the chart using D3.js APIs including `d3.csv` for data loading, `scaleLinear` and `scaleOrdinal` for positioning and coloring, and `axisBottom` and `axisLeft` for the axes. SVG rendering makes the visualization responsive via a ResizeObserver.

NNita

86% match

Loading thumbnail…

Fork of Fork of d3.js project

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three species of iris flowers. The visualization uses D3.js v7 to render an SVG chart with axes, labels, and a legend that highlights data points by species when hovered, using color categories from a BBC-inspired theme. It leverages D3's `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs, with data loaded asynchronously via `d3.csv`.

Ssowjanyateppali4202@gmail.com

86% match

Loading thumbnail…

Fork of D3 Scatter Plot

This visualization uses D3 v6 to render a scatter plot of the Iris Dataset, showing the relationship between petal length and sepal length. It employs d3.csv for data loading, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to display the scales. Data points are drawn as SVG circles, with margins and a full-window responsive sizing. The dataset is fetched from a GitHub Gist, and numeric fields are parsed from strings before plotting.

Aadriana-ss

85% match

Loading thumbnail…

Fork of Fork of D3 AI Template

This visualization displays the Iris dataset as a scatter plot, mapping sepal length and sepal width across three flower species with color-encoded points, a legend, title, and axis labels. It uses D3.js v7 with `d3.csv` for data loading, `scaleLinear` and `scaleOrdinal` for positioning and color, and `axisBottom`/`axisLeft` for axes. The code also includes interactive hover highlighting via the legend and `ResizeObserver` for responsive dimensions, rendering everything as SVG.

NNita

85% match

Loading thumbnail…

Fork of D3 Scatter Plot

A fork of the classic D3 scatter plot, this example visualizes the Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis. It uses d3.csv to load and parse the data, with d3.scaleLinear and d3.extent for scaling, and d3.axisLeft and d3.axisBottom for the axes. Circles are appended to an SVG via d3.selectAll and data joins. The chart fills the entire browser window, with a fixed radius of 5 pixels for each point. The code relies on d3 v6.

AAaron

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

85% match