Skip to main content
SimilarExport ZIP
100%

Fork of D3 Scatter Plot

✓ Published0🌍 Public
SShan Gao
Last edited May 5, 2021
Created on May 5, 2021
Forked from D3 Scatter Plot

This example visualizes the Iris dataset with a D3 scatter plot using SVG circles, mapping petal length on the x-axis and sepal length on the y-axis. It loads the CSV data via `d3.csv`, parses numeric fields, and derives scales with `scaleLinear` from the data extent, positioning each point based on those scales. Axes are rendered using `axisBottom` and `axisLeft`, while the plot fills the browser window. The code leverages d3.v6 destructured functions like `select` and `csv` to fetch and draw the points.

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 example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v6 to load CSV data via `d3.csv`, scales the data with `scaleLinear` and `extent`, and renders SVG circles for each observation. Axes are generated with `axisLeft` and `axisBottom`, while the chart fills the browser window using `window.innerWidth` and `window.innerHeight`. The plot clearly shows clusters of iris species based on their measurements.

Ddaria.daria
96% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example renders the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v6’s `csv` loader to fetch the data, `scaleLinear` with `extent` to compute scales, and `axisLeft`/`axisBottom` to draw the axes. The plot is drawn as SVG circles using `select` to append elements and a `join` operation for efficient circle creation. The visualization adapts to the full browser window, with tick labels styled at 24 pixels.

BBakunya | Kirisaki Rem
96% 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
96% 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
96% 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 APIs including `csv` for data loading, `scaleLinear` for scaling, and `axisLeft` and `axisBottom` for axes. The SVG circles are rendered via `selectAll` and `join`, with a fixed radius. The plot fills the browser window, using `window.innerWidth` and `window.innerHeight` to size the chart, and includes tick labels with 24px font styling.

JJordi
96% match
Loading thumbnail…

Fork of 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. Each data point is rendered as a circle on a full-screen SVG canvas using D3 v7. The code loads the CSV data from a GitHub Gist via `d3.csv`, then uses `d3.scaleLinear` with `d3.extent` to compute the scales. Axes are added with `d3.axisLeft` and `d3.axisBottom`, while the tick labels are enlarged to 24 pixels for readability.

UUzoemeka Okechukwu Innocent
96% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset using a D3 scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses d3.csv to load the data, d3.scaleLinear and d3.extent to compute scales, and d3.axisLeft and d3.axisBottom to render axes. The SVG circles are positioned using the d3.select and join API, with a radius of 5 pixels. The plot fills the entire browser window by setting the SVG dimensions to window.innerWidth and window.innerHeight.

Ppakoensi
96% 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
96% match