Fork of D3 Scatter Plot

100%

Fork of D3 Scatter Plot

✓ Published0🌍 Public

Last edited Jan 26, 2022

Created on Jan 26, 2022

This visualization displays the classic Iris Dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Circles represent individual flower samples, with axes rendered using D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The code loads data via `d3.csv`, parses numeric columns, and appends SVG circles sized with a fixed radius. It leverages D3 v6, fetching the dataset from a GitHub Gist and responsively filling the browser window with full viewport dimensions.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Scatter Plot

This visualization shows the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. It renders circular marks in an SVG canvas using D3 v7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, with data loaded via `d3.csv` from a GitHub Gist. The plot fills the entire browser window, uses a minimal margin layout, and includes large tick labels for readability.

UUzoemeka Okechukwu Innocent

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flower samples. Each circle represents a data point, with axes labeled using D3's scaleLinear, axisLeft, and axisBottom APIs, and tick text styled at 24px. The visualization fills the browser window by setting SVG dimensions to window.innerWidth and innerHeight, reading the dataset from data.csv via d3.csv. Circle positions are computed by mapping data values through linear scales with defined margins and a fixed radius of 5 pixels.

YYash_Mistry

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and sepal length onto the horizontal and vertical axes. Each flower is drawn as a circle with a fixed radius. The visualization uses the D3.js v6 API, including `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` to render tick labels. The SVG canvas fills the browser window, with circles positioned via data-driven coordinates.

JJyothicherukuri

95% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flowers. The visualization uses D3 v6 to load the CSV data, scale the x and y axes with `d3.scaleLinear`, and render circles as SVG marks. Axes are added using `d3.axisLeft` and `d3.axisBottom`, with the plot sized to the full browser window. The code demonstrates a clean mapping of data fields to spatial positions.

Zzhuomo-maker

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

95% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles with SVG. The axes are generated using `d3.axisLeft` and `d3.axisBottom`, with margins adjusting the plot area to fill the viewport.

Wwilliam3333

95% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Each flower is rendered as a fixed-radius circle, with axes labeled via `d3.axisLeft` and `d3.axisBottom`. The code loads CSV data using `d3.csv`, parses numeric values, and applies `d3.scaleLinear` with `d3.extent` to set domains. SVG circles are appended using `selectAll().data().join()`, while margins and window dimensions position the plot.

RRichard

95% match

Loading thumbnail…

Fork of D3 Scatter Plot

A D3 scatter plot displays the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis for individual flower specimens. Each data point is rendered as a fixed-radius SVG circle, with axes scaled using `d3.scaleLinear`. The code loads the CSV data via `d3.csv`, parses numeric fields, and appends an SVG canvas sized to the browser viewport. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the circles are bound to data and added using `d3.selectAll` and `.join`.

NNita

95% match