Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot

✓ Published1🌍 Public
Mmax-31
Last edited Aug 27, 2022
Created on Aug 27, 2022
Forked from HTML Starter

This D3 scatter plot visualizes the classic Iris dataset, mapping petal length and sepal width for 150 flowers to SVG circles. It demonstrates the modern d3.select API and the new d3.scaleLinear with extent helper, using d3.csv for data loading, d3.axisLeft and d3.axisBottom for axes, and a direct selectAll and join pattern to bind data to circles. The chart fills the browser viewport and employs consistent 20px tick labels for readability.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for each flower sample. The visualization uses D3 v7's `csv` loader to fetch and parse the remote dataset, then applies `scaleLinear` and `extent` to compute the axis domains from the numeric columns. SVG circles are drawn using a data join, with axes generated via `axisLeft` and `axisBottom`. The chart is rendered in vanilla HTML and JavaScript, filling the browser viewport dynamically.

Ccharlieronchetti@gmail.com
94% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, plotting sepal length against petal length for each flower specimen. The visualization uses D3 v7 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data coordinates to SVG circle positions with a fixed radius of 5 pixels. Circles are rendered via SVG `<circle>` elements appended through D3's selection and join operations, with axes positioned using margin-based transforms. The chart fills the browser window, with data loaded asynchronously from a remote CSV file using `d3.csv`.

Aalexscott-untitled
94% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each flower is rendered as an SVG circle, with axes and titles added via `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`. The chart fills the browser window and uses custom fonts for tick labels and axis titles.

KKaustav Sen
94% match
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the classic Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis, using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions. Circles are rendered as SVG elements with a fixed radius of 5 pixels, positioned via `cx` and `cy` attributes. The chart fills the browser window by setting width and height to `window.innerWidth` and `window.innerHeight`, with margins applied to the scales. The code fetches the data as CSV from a GitHub gist, parses numeric fields, and applies a data join with `selectAll` and `.join`.

JJetlinZ
93% 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
93% match
Loading thumbnail…

D3 Scatter Plot

This example displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. The visualization uses D3 v7’s `select`, `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` APIs to load the data, compute scales, and render SVG circles and axes. The plot fills the browser window, with bold tick labels, and the code demonstrates a straightforward data-ink pipeline from CSV parsing to interactive-free SVG rendering.

WWaseem Medhat
93% match
Loading thumbnail…

Scatter Plot with D3

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis for individual flowers. The visualization uses D3.js to load CSV data via `d3.csv`, create linear scales with `scaleLinear`, and render SVG circles as data points. Axes are generated using `axisBottom` and `axisLeft` and positioned within a margin-based layout. The chart fills the browser window through dynamically computed width and height, with the rendered SVG scaling to the viewport.

Aadventuresenglish.info@gmail.com
93% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, mapping petal length and sepal length on the x- and y-axes. The SVG visualization uses the modular d3.scaleLinear extent and axis functions to compute scales and draw ticks. Iris data is loaded asynchronously via `d3.csv`, with numeric parsing and a color scheme imported from `d3-scale-chromatic` for interpolation. The plot fills the browser window, using a data join to create circles for each Iris sample.

KKhanAzmat
93% match