Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

✓ Published0🌍 Public
AAnurup Reddy
Last edited Oct 19, 2025
Created on Oct 4, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
91% match
Loading thumbnail…

Fork of D3 Starter

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.

Mmaddulanagasanjana@gmail.com
91% match
Loading thumbnail…

Fork of D3 Starter

This example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with an input field that adjusts the x-axis domain. The code uses D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, with `transition().duration(1000)` animating axis rescaling and circle repositioning when the domain changes. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the SVG viewport uses `preserveAspectRatio` for responsive scaling.

DDaveCumin
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 D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis using a linear scale. It loads the CSV data via `d3.csv`, parses numeric fields, and renders circles as SVG marks with a fixed radius. The chart uses `d3.scaleLinear` for both axes, `d3.extent` to set domains, and `d3.axisLeft` and `d3.axisBottom` for tick marks, all within a full-window SVG canvas.

AAaron
90% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example renders the classic Iris dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. The visualization uses d3.scaleLinear to compute scales from the data extents, then draws the points as SVG circles with d3.select and a join operation. Axes are added using d3.axisLeft and d3.axisBottom, with a large font size applied to tick labels. The plot fills the entire browser window, sized to the inner dimensions of the viewport. CSV data is loaded asynchronously via d3.csv from a remote Gist URL.

PPierre COURANT
90% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example presents a scatter plot of the classic Iris dataset, mapping petal length against sepal length for individual flowers. The visualization uses circles of a fixed radius to represent data points, with axes positioned along the bottom and left edges of the SVG canvas. Using d3.csv, the code loads data from a remote gist, parses numeric columns, and applies d3.scaleLinear with d3.extent to compute the domain for each axis. The visualization is rendered using the d3.select and join operations to create SVG circle elements, with d3.axisLeft and d3.axisBottom generating the chart's coordinate frames.

TteerthSatwara
90% match