Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
Wwaseemmedhat
Last edited Dec 16, 2022
Created on Dec 16, 2022
Forked from D3 Starter

This scatter plot visualizes the relationship between sepal length and petal width in the classic Iris dataset, which is loaded as CSV. The code uses D3 v7 scaleLinear and extent functions to map data to x and y pixel coordinates, and renders marks as SVG circles with an indigo fill. Axes are generated using axisBottom, axisLeft, and tick styling from Chivo Mono font, placed within a full-viewport SVG.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Using D3 v7, it loads CSV data via `d3.csv`, applies linear scales with `scaleLinear`, and renders circles as marks. Axes are drawn with `axisLeft` and `axisBottom`, and the SVG canvas fills the browser window. The code explicitly parses numeric fields and converts data values into pixel coordinates for each point.

SScott-Collier
94% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris Dataset, displaying sepal length on the x-axis and sepal width on the y-axis, with each point colored by species (Iris-setosa, Iris-versicolor, or Iris-virginica). The visualization uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and additional petal length and width values determine each circle’s radius properties. The plot fills the browser window, with styled tick labels and axis text.

DDineshK2602
93% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, comparing petal length against sepal length for individual flowers. Built with D3 v6, the SVG rendering uses `scaleLinear` to map data extents to pixel coordinates, with `axisLeft` and `axisBottom` generating labeled axes. Circles are joined to the data via `selectAll().data().join()`, while margins and full-window dimensions position the chart. The code asynchronously loads the comma-separated values using `csv` and parses numeric fields before plotting.

Vvidhyanamini
93% match
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for each flower sample. The code loads the CSV data using d3.csv, parses numeric fields, and scales the values with d3.scaleLinear and d3.extent. Circles mark each data point in an SVG rendered at full viewport size. Axes are added with d3.axisLeft and d3.axisBottom, while custom text labels for "Petal Length" and "Sepal Length" are positioned using SVG transforms. The example uses D3 v6 and a margin-based layout for the plot.

LLakshmiVandanaNunna
93% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, showing the relationship between sepal length and petal length for 150 flowers across three species. The visualization uses D3 v7 to render circles on an SVG canvas, with axes created using the imported axis functions. The code employs d3.scaleLinear for both x and y axes, and d3.extent to determine the data domains. Data is loaded asynchronously via fetch and parsed with d3.csvParse, converting string values to numbers for accurate positioning.

LLauren
93% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The SVG rendering uses d3.scaleLinear to transform raw CSV values into pixel coordinates, with d3.min and d3.max defining the domains. Circles represent individual flowers, colored in a teal tone, while d3.axisLeft and d3.axisBottom generate labeled axes. The code loads data via d3.csv and appends text labels for both axes, using a full-window responsive layout with fixed margins.

Aainhoadieruiz@gmail.com
93% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the classic Iris Dataset, plotting sepal length against petal length for 150 flowers. The visualization uses a D3 v7 SVG rendering pipeline with `d3.csvParse` to load and type-convert the CSV data, `d3.scaleLinear` for x and y scales, and a custom `scatterPlot` function that renders circles with fixed radius. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with separate labeled axis text elements. The chart fills the viewport and automatically loads the dataset on initialization.

KKhatera Alizada
93% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. Each flower is rendered as a circle using D3 v7’s `select`, `scaleLinear`, `csv`, and `extent` functions, with axes drawn via `axisLeft` and `axisBottom`. The SVG output fills the browser window, with data loaded from a remote CSV file and parsed into numeric fields before plotting.

Ddwikbtn
93% match