Fork of D3 Scatter Plot

100%

Fork of D3 Scatter Plot

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

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.

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

NNaimisha-M

96% match

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 uses D3 version 6, loading the data via the `csv` function and parsing numeric fields. The code employs `scaleLinear` to map data domains to pixel ranges, `extent` to calculate domains, and `axisLeft` and `axisBottom` to render the y- and x-axes. Data points are drawn as SVG circles using the `.join` operator, while axis labels are added as SVG text elements.

RRahulSai05

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flower samples. Each circle represents a data point, with axes labeled using D3's scaleLinear, axisLeft, and axisBottom APIs, and tick text styled at 24px. The visualization fills the browser window by setting SVG dimensions to window.innerWidth and innerHeight, reading the dataset from data.csv via d3.csv. Circle positions are computed by mapping data values through linear scales with defined margins and a fixed radius of 5 pixels.

YYash_Mistry

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

A D3 scatter plot displays the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is represented as a circle with a fixed radius of 5 pixels. The visualization uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.extent` to compute the domains. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, with the SVG filling the full browser window. The chart is built using D3 v6 and styled with a 24-pixel tick font.

DDINESH SAI BOPPANA

96% match

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 uses D3 v6 to load the CSV data, scale the x and y axes with `d3.scaleLinear`, and render circles as SVG marks. Axes are added using `d3.axisLeft` and `d3.axisBottom`, with the plot sized to the full browser window. The code demonstrates a clean mapping of data fields to spatial positions.

Zzhuomo-maker

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

A D3 scatter plot displays the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis for individual flower specimens. Each data point is rendered as a fixed-radius SVG circle, with axes scaled using `d3.scaleLinear`. The code loads the CSV data via `d3.csv`, parses numeric fields, and appends an SVG canvas sized to the browser viewport. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the circles are bound to data and added using `d3.selectAll` and `.join`.

NNita

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 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, compute scales, and render axes. Circles are drawn with SVG via `selectAll` and `join`, with coordinates transformed from data values to pixel positions. The plot fills the browser window and includes a 24-pixel tick font for readability. Data is fetched from a GitHub Gist, and parsing converts numeric fields with `+d`.

EEmnaAbbes

96% match