Scatter Plot Basic

100%

Scatter Plot Basic

✓ Published1🌍 Public

Last edited Sep 12, 2023

Created on Sep 12, 2023

This example demonstrates a basic scatter plot using the classic Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It renders circles as SVG elements, with axes generated via `axisLeft` and `axisBottom` from `d3.scaleLinear`. The code fetches the CSV data asynchronously, parses numeric fields, and positions each point based on computed scales. The chart fills the window, with margins and a fixed circle radius, using D3’s selection and join operations to bind data to the SVG circles.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot 101

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.

AAlex

92% match

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

91% match

Loading thumbnail…

Basic Scatter Plot

This basic scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis with a circle per sample. The chart uses D3 v4’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with grid lines, while `d3.csv` loads the data and parses numeric fields. Points are appended as SVG circles, positioned via the scales, with margins and rotated axis labels styled through SVG text elements.

SShivaKarpe

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

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

90% match

Loading thumbnail…

Basic Scatter Plot

This example shows a basic scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis for 150 flowers. Using D3 v4, it loads the data from a CSV file with `d3.csv`, applies linear scales via `d3.scaleLinear`, and renders each flower as a circle element in an SVG container. The plot does not encode species or other dimensions, and includes no axes or labels.

CCurran Kelleher

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

90% match

Loading thumbnail…

basic scatter

This example visualizes the classic Iris dataset as a basic scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis. It loads data from a CSV file hosted on GitHub using `d3.csv`, then uses `d3.scaleLinear` to translate data coordinates into pixel positions. The circles are rendered as SVG elements, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, adapting its dimensions to `window.innerWidth` and `window.innerHeight`, and applies custom tick font sizing through CSS.

MMark D. Clements

90% match