Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot

✓ Published1🌍 Public
Lliu yang
Last edited Nov 19, 2023
Created on Nov 17, 2023
Forked from HTML Starter

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`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length to the horizontal axis and sepal length to the vertical axis. Each flower is rendered as a circle in an SVG canvas. The code loads CSV data using `d3.csv`, parses numeric fields, and applies linear scales via `d3.scaleLinear` with domains derived from `d3.extent`. Circles are joined to the data with `selectAll().data().join()`, sized with a fixed radius of 5 pixels, and positioned using the scaled coordinates.

Ttrongan765@gmail.com
95% match
Loading thumbnail…

D3 Scatterplot

This example visualizes the Iris dataset as a scatterplot, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as a circle using D3’s selection and data-join methods. The code loads the data via `d3.csv`, scales positions with `d3.scaleLinear`, and adds axes through `d3.axisLeft` and `d3.axisBottom`. The SVG is sized to the full window, and the plot includes customizable margins and tick font sizing.

Aajoua
95% 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
95% 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
95% 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
95% match
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
95% 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
94% match
Loading thumbnail…

D3 Scatter Plot

This visualization displays a scatter plot of the classic Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. The code loads the data using `d3.csv`, converts the numeric fields, and uses `d3.scaleLinear` with `d3.extent` to set the scales. Circles are rendered with `d3.selectAll` and `.join`, while `d3.axisLeft` and `d3.axisBottom` provide the labeled axes, with all drawing done in SVG.

SSam Hege
94% match