Skip to main content
SimilarExport ZIP
100%

Scatterplot 101

✓ Published2🌍 Public
AAlex
Last edited Apr 7, 2023
Created on Apr 6, 2023
Forked from HTML Starter

This example displays the classic Iris dataset as a scatterplot, mapping petal length on the x-axis against sepal width on the y-axis to reveal species clustering. The visualization is rendered as an SVG using D3 v7, with data loaded asynchronously from a CSV file via the `csv` function. The code employs `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct linear scales and axes, then draws circles with fixed radius for each data point.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Using D3 v7, it loads CSV data via `d3.csv`, applies linear scales with `scaleLinear`, and renders circles as marks. Axes are drawn with `axisLeft` and `axisBottom`, and the SVG canvas fills the browser window. The code explicitly parses numeric fields and converts data values into pixel coordinates for each point.

SScott-Collier
93% match
Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset, plotting sepal length against petal length for 150 flower specimens. Built with D3 v4, it loads data from a CSV file and uses linear scales with the margin convention to position circles in an SVG. The axis constraints are omitted, but the scatter plot effectively reveals the clustering of the three iris species based on their measured botanical dimensions.

CCurran Kelleher
93% match
Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset, plotting sepal length against petal length for 150 flowers of three species. Using D3.v4, it constructs an SVG scatter plot with labeled, ticked axes, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for coordinate mapping and axis generation. The visualization also demonstrates custom axis label styling and margin-based layout, with data loaded from a CSV file.

CCurran Kelleher
93% match
Loading thumbnail…

d3 scatter plot

This example visualizes the classic Iris dataset as a scatter plot, comparing petal length on the x-axis with sepal length on the y-axis for 150 flowers. The visualization uses D3 v7 with vanilla JavaScript to load the CSV data via `d3.csv`, parse the numeric fields, and render SVG circles positioned through `d3.scaleLinear` scales. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, while the chart fills the entire browser viewport with margins applied around the plot area.

FFrancisco Ibelles
92% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the classic Iris Dataset, plotting sepal length against petal length for 150 flowers. The visualization uses a D3 v7 SVG rendering pipeline with `d3.csvParse` to load and type-convert the CSV data, `d3.scaleLinear` for x and y scales, and a custom `scatterPlot` function that renders circles with fixed radius. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with separate labeled axis text elements. The chart fills the viewport and automatically loads the dataset on initialization.

KKhatera Alizada
92% match
Loading thumbnail…

D3 Scatter Plot Following Along

This example displays the classic Iris dataset as a scatter plot, mapping petal length along the x-axis and sepal length along the y-axis. The visualization uses D3 v7’s `scaleLinear` and `extent` functions to compute the domain from the CSV data, then renders circles via SVG selection joins. Axis components are generated with `axisLeft` and `axisBottom`. The plot fills the entire browser window, with data loaded asynchronously from a GitHub gist, parsed to numeric values, and drawn with fixed 5-pixel radius points.

PParker-D5
92% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Circles represent individual flowers, with axes labeled via D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The code loads CSV data using `d3.csv`, parses numerical fields, and renders the plot as SVG circles sized with a fixed radius. The visualization fills the browser window, using viewport dimensions for the chart’s width and height, and demonstrates a straightforward data-joining workflow with `selectAll` and `join`.

Lliu yang
92% match
Loading thumbnail…

scatter-plot

This example visualizes the classic Iris Dataset, plotting petal width against petal length for 150 individual flowers. The scatter plot uses `d3.scaleLinear` to map data extents to screen coordinates, with circles colored by a random HSL hue at partial opacity. The code loads the CSV file via `fetch` and parses it with `csvParse`, then renders the visualization using D3 v7 selection joins. Custom axes are created with `d3.axisLeft` and `d3.axisBottom`, with white labels for petal-length and petal-width.

Oownerofthesoul0000@gmail.com
92% match