Creating a Scatter Plot with D3.js

100%

Creating a Scatter Plot with D3.js

✓ Published0🌍 Public

Last edited Mar 6, 2022

Created on Mar 5, 2022

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes and coloring each point by species (setosa, versicolor, or virginica). It uses D3.js v6 with a linear scale and axis generators (`d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`) to render SVG circles. Data is loaded via `d3.csv` from a remote URL, with numeric fields parsed on ingestion. The plot is sized to the full window and includes custom tick styling.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Creating a Scatter Plot with D3

This example visualizes the Iris Dataset as a scatter plot, encoding petal length on the x-axis and petal width on the y-axis, with each point colored by species (green for setosa, yellow for versicolor, blue for virginica). It also reads sepal length and width as additional attributes for each circle, though these are not mapped to visual channels. Built with D3 v6, the code uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. Circles are appended via `selectAll` and `join`, rendered as SVG, with axis labels and a title manually positioned.

SShivaKarpe

96% match

Loading thumbnail…

Creating a Scatter Plot with D3.js

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length and width to the x- and y-axes and coloring each point by species (setosa, versicolor, and virginica). It uses D3.js v6 with SVG rendering, loading data via `d3.csv`, scaling with `d3.scaleLinear`, and adding axes with `d3.axisLeft` and `d3.axisBottom`. The code also includes custom axis labels for sepal length and petal length.

SSreejaBellamkonda

94% match

Loading thumbnail…

creating scatter plot with iris data

This example uses D3 v6 to create an interactive scatter plot from the Iris dataset, loading CSV data via `d3.csv` and rendering SVG circles for each observation. It maps petal length and width to the x and y axes using `d3.scaleLinear`, with colors distinguishing the three iris species (setosa, versicolor, and virginica). The axes are generated with `d3.axisLeft` and `d3.axisBottom`, and axis labels identify the variables. The chart fills the browser window and includes a legend via the species colors, demonstrating a straightforward data-driven visualization workflow.

Vvaddepallinaveen

93% match

Loading thumbnail…

Creating a Scatter Plot with D3.js

This example visualizes the Iris flower dataset as a scatter plot of petal length against petal width, with each point colored by species. It loads the data from a CSV file using d3.csv and maps values to screen coordinates with d3.scaleLinear and d3.extent. The SVG circles are rendered via d3.select, and axes are generated with d3.axisLeft and d3.axisBottom. The code runs as a React example with D3 v6, using an HTML page that appends an SVG to the body and sets the chart dimensions to the full window size.

LLakshmiManjushaReddyYarreddu

93% match

Loading thumbnail…

Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica) using orange, green, and purple. The SVG rendering is built with D3 v6, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scales and axes. Data is loaded asynchronously via `d3.csv`, with numeric fields parsed on input, and the chart includes custom axis labels and a title.

AAnanyaSamala

93% match

Loading thumbnail…

Creating a Scatter Plot with D3.js

This example visualizes the Iris flower dataset as a scatter plot, showing the relationship between petal length and petal width. Each circle represents a flower, colored by its species (blue, grey, or brown) using a custom marker function. The code loads CSV data with D3’s `csv` method, scales values with `scaleLinear` and `extent`, and renders axes via `axisLeft` and `axisBottom`. Circles are appended to an SVG using `select`, `data`, and `join`, with styling applied through `attr` properties.

SsreepavanKothapalli

93% match

Loading thumbnail…

Creating scatter DV

This example uses a D3.js v6 scatter plot to visualize the Iris Dataset, mapping petal length and petal width onto the x- and y-axes. It colors each point by species (setosa, versicolor, virginica) and uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft to render them. The SVG is sized to the window, and circles are drawn with a 4-pixel radius, showing sepal measurements as extra attributes.

PPallaviManupati

93% match

Loading thumbnail…

Scatter Plot for Iris Data

This example renders the classic Iris dataset as a scatter plot using D3 v6. It maps petal length and petal width to the x and y axes, coloring each point by species (setosa, versicolor, or virginica) with yellow, pink, or blue fills. The dataset is loaded via `d3.csv` from a GitHub raw URL, with numeric parsing of all measurements. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, using `d3.scaleLinear` and `d3.extent` to set domains based on the data.

Aarcothanmukha

93% match