Fork of D3 Scatter Plot

100%

Fork of D3 Scatter Plot

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

This example shows a scatter plot of the Iris Dataset, with sepal length plotted on the y-axis and petal length on the x-axis. The visualization uses D3 v6 and renders circles as SVG elements, with axes created using `axisLeft` and `axisBottom`. The code loads CSV data via `d3.csv`, scales the values with `scaleLinear`, and computes the domain from the data’s extent using `d3.extent`. The plot’s width and height are set to the full window size, with margins defining the axis positions.

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 scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flowers. The visualization is built with D3 version 6, using `scaleLinear` for both axes, `extent` to compute data domains, and `axisLeft`/`axisBottom` for tick marks. The code retrieves data from a CSV file via `d3.csv`, then renders circles with a fixed radius of 5 pixels. The SVG canvas fills the entire browser window, with axes labeled at 24-pixel font size.

NNaimisha-M

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

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset using a D3 scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses d3.csv to load the data, d3.scaleLinear and d3.extent to compute scales, and d3.axisLeft and d3.axisBottom to render axes. The SVG circles are positioned using the d3.select and join API, with a radius of 5 pixels. The plot fills the entire browser window by setting the SVG dimensions to window.innerWidth and window.innerHeight.

Ppakoensi

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 visualizes 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 to load CSV data via `d3.csv`, scales the data with `scaleLinear` and `extent`, and renders SVG circles for each observation. Axes are generated with `axisLeft` and `axisBottom`, while the chart fills the browser window using `window.innerWidth` and `window.innerHeight`. The plot clearly shows clusters of iris species based on their measurements.

Ddaria.daria

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

95% match

Loading thumbnail…

Fork of D3 scatterplot

This example shows a scatterplot of the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code loads the data via `d3.csv`, parses numeric values, and uses `d3.scaleLinear` with `d3.extent` to map the data ranges to the full browser window. Each data point is rendered as an SVG circle, and axes are generated with `d3.axisLeft` and `d3.axisBottom`. The visualization uses `d3.v7` and a minimal, full-screen SVG layout with fixed margins.

95% match