Fork of D3 Scatter Plot

100%

Fork of D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 7, 2022

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Built with D3 v6 and rendered as SVG, it loads data via `d3.csv`, scales positions using `d3.scaleLinear` with `d3.extent` domains, and draws circles for each observation. Axes are generated with `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window, with margins and a fixed point radius, highlighting the distribution of flower measurements.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Scatter Plot

This example displays the Iris Dataset as an interactive scatter plot, mapping petal length and sepal length for each specimen on a full-window SVG. It uses the D3.js v6 library, specifically importing functions like `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The code asynchronously fetches CSV data from a remote Gist, parses numeric fields, then binds circles to the data points at computed x and y positions. Axes are rendered with D3’s standard axis components, and the chart automatically resizes to fill the browser viewport.

Nnikhitha693

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and sepal length onto the horizontal and vertical axes. Each flower is drawn as a circle with a fixed radius. The visualization uses the D3.js v6 API, including `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` to render tick labels. The SVG canvas fills the browser window, with circles positioned via data-driven coordinates.

JJyothicherukuri

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis for individual flower specimens. The code loads raw CSV data from a GitHub gist, parses numeric fields, and uses D3 v6 scales, axes, and SVG circle elements to render the points across a full-window canvas. Axis tick labels are styled at 32 pixels for improved readability.

Nnikhitha693

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This visualization displays the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each of the 150 flowers appears as a circle with a fixed radius of 5 pixels. The code uses d3.csv to load the data, d3.scaleLinear and d3.extent to set the scales, and d3.axisLeft and d3.axisBottom to render the axes. The SVG rendering fills the entire browser window, and circles are drawn using d3.selectAll and the .join method.

Nnikhitha693

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for scaling, and `axisLeft` and `axisBottom` for axes. The SVG circles are rendered via `selectAll` and `join`, with a fixed radius. The plot fills the browser window, using `window.innerWidth` and `window.innerHeight` to size the chart, and includes tick labels with 24px font styling.

JJordi

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example renders the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v6’s `csv` loader to fetch the data, `scaleLinear` with `extent` to compute scales, and `axisLeft`/`axisBottom` to draw the axes. The plot is drawn as SVG circles using `select` to append elements and a `join` operation for efficient circle creation. The visualization adapts to the full browser window, with tick labels styled at 24 pixels.

BBakunya | Kirisaki Rem

96% match

Loading thumbnail…

Fork of 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. Built with vanilla JavaScript and D3 v6, the SVG circles are positioned using `d3.scaleLinear` with domains from `d3.extent` and ranges derived from the window’s dimensions. Data is loaded via `d3.csv` from a GitHub Gist, with numeric columns parsed on ingestion. Axis rendering via `d3.axisLeft` and `d3.axisBottom` is present but commented out, leaving the chart with only the plotted points.

AAdan Rodriguez

95% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles with SVG. The axes are generated using `d3.axisLeft` and `d3.axisBottom`, with margins adjusting the plot area to fill the viewport.

Wwilliam3333

95% match