D3 Scatter Plot Following Along

100%

D3 Scatter Plot Following Along

✓ Published2🌍 Public

Last edited Sep 28, 2023

Created on Sep 28, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

94% match

Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Using D3 v6, it loads data via `d3.csv`, applies linear scales with `scaleLinear` and `extent`, and renders circles as marks. Axes are drawn with `axisBottom` and `axisLeft` in an SVG container. The plot fills the entire window and displays all 150 samples without color or categorical encoding.

CCurran Kelleher

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

94% 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 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 Scatterplot

This visualization displays the classic Iris dataset, plotting petal length against sepal length. Each flower sample is rendered as a fixed-radius circle in an SVG canvas that fills the browser viewport. The code uses D3 v7's `csv` loader to fetch data from a GitHub gist, then employs `scaleLinear` with `extent` to compute domains for both axes. Axis ticks are generated using `axisLeft` and `axisBottom`, with the categorical iris species left uncolored in this minimal example. The rendering relies on D3's declarative selection-based joins to bind data to SVG circle elements, with dimensions set to the window's inner height and width.

Mmegan-grannan

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

93% match