D3 Scatter Plot (Vanilla JS)

100%

D3 Scatter Plot (Vanilla JS)

✓ Published5🌍 Public

Last edited May 6, 2021

Created on May 5, 2021

Forked from D3 Partial Scatter Plot (Vanilla JS)

This example renders a scatter plot of iris flower measurements, mapping petal length to the x-axis and sepal length to the y-axis. It loads CSV data from a Gist URL using `d3.csv`, parses numeric fields, and applies `d3.scaleLinear` for both axes. Circles are appended to an SVG via `d3.select` and `join`, with axes generated by `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window, using a margin convention and D3 v6 with vanilla JavaScript.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

D3 Partial Scatter Plot (Vanilla JS)

This example displays a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using D3 v6. It fetches the CSV from a GitHub Gist, parses the numeric fields, and creates SVG circles with pixel-based coordinates scaled from the data extents. The visualization fills the browser window, using D3’s `scaleLinear`, `extent`, `csv`, and `select` APIs to handle scaling, data loading, and DOM manipulation.

AAndrea Mignone

95% match

Loading thumbnail…

D3 Scatter Plot Vanilla Javascript

This scatter plot visualizes the relationship between petal length and sepal length using the classic Iris dataset, loaded from a GitHub gist via `d3.csv`. The chart maps each flower’s measurements to x and y positions using `d3.scaleLinear` and `d3.extent`, rendering circles as SVG marks. It includes axes generated with `d3.axisLeft` and `d3.axisBottom`, plus a title, all drawn with D3 v7 in vanilla JavaScript. The plot fills the browser window, with points sized at a fixed radius.

FFrancisco Ibelles

93% match

Loading thumbnail…

D3 Scatter Plot (Vanilla JavaScript and HTML)

This scatter plot visualizes the relationship between petal length and sepal length in the Iris dataset, with each flower represented as a circle. The SVG rendering uses d3.scaleLinear to map data values to screen coordinates and d3.axisLeft/axisBottom to draw the axes. Data loads asynchronously via d3.csv from a GitHub gist, and the code parses numeric fields before binding the marks. The example demonstrates the core pattern of joining data to SVG circles with the selection.join() method.

Nnim@brejnholt.dk

93% match

Loading thumbnail…

D3 scatter plot

This example uses D3.js to create a scatter plot of the classic Iris dataset, loaded via a CSV file from a gist. It displays two measurements, petal length along the x-axis and sepal length along the y-axis, as small circles. The code leverages `d3.csv` for data loading and parsing, `d3.scaleLinear` for mapping data values to screen coordinates, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The visualization is drawn as an SVG, sized to fill the browser window, with a fixed margin around the plot.

Ccyriltoneatto965

92% match

Loading thumbnail…

Fork of D3 Scatter Plot (Vanilla JS)

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis as colored circles with a fixed radius. It uses D3 v6 (loaded via a global script tag) with the `csv` parser, `scaleLinear` for scaling, and `axisLeft`/`axisBottom` for axes. The data is fetched from a Google Drive CSV URL, and the SVG rendering fills the full browser window.

YYash_Mistry

92% match

Loading thumbnail…

D3 Scatter Plot

This example renders the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7 to load the CSV data via `d3.csv`, and then builds scales with `d3.scaleLinear` and `extent` to compute domains. Circles are drawn as SVG elements, with axes generated through `d3.axisLeft` and `d3.axisBottom`. The visualization adapts to the full browser window and includes a large font size for tick labels via CSS.

SSubhendu Karmakar

92% match

Loading thumbnail…

Vanilla Scatter Plot

This example renders a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The code uses D3 v6 with `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` for scales, and `d3.axisLeft` and `d3.axisBottom` for axes. Circles are drawn via SVG using the general update pattern with `selectAll` and `join`. The plot fills the browser window, with margins and tick styling configured in CSS.

Mmaxthamt

92% match

Loading thumbnail…

D3 Scatter Plot Annotated

This example renders the classic Iris flower dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis using D3 scales and SVG circles. It loads the CSV with `d3.csv`, parses numeric fields, and draws axes with `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, with tick labels styled to a larger font size for readability.

CCurran Kelleher

92% match