Skip to main content
SimilarExport ZIP
100%

Making a Scatter Plot

✓ Published3🌍 Public
OOscar
Last edited Jan 24, 2026
Created on Jan 21, 2026

This example demonstrates how to build a scatter plot from the classic Iris dataset, encoding petal length on the x-axis and sepal width on the y-axis. It uses React to define custom SVG components, with D3 v5 functions like `scaleLinear`, `extent`, and `format` to compute scales and axis ticks, while the data is loaded asynchronously from a CSV file via D3's `csv` function. The visualization includes labeled axes, formatted tick marks, and circular marks with tooltips, all rendered as SVG elements within a React component.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. The visualization includes labeled axes, tick marks, and circular marks with hover tooltips. Built with React and D3 v7, it uses `scaleLinear` and `extent` for scaling, and custom components for axes and marks that render SVG elements. Data is loaded asynchronously via `d3.csv` and parsed into numeric values.

ZZoe Ferencova
95% match
Loading thumbnail…

Making a Scatter plot

This example shows an interactive scatter plot of Iris flower measurements, plotting petal length along the x-axis against sepal width on the y-axis. The visualization uses React components to render SVG elements, with D3 v5 handling data loading via `d3.csv` and scales through `d3.scaleLinear` and `d3.extent`. Data comes from the Iris dataset fetched from a GitHub gist. Axes are built from custom React components that map D3 scales to SVG tick marks and labels, while each data point is rendered as a circle with a tooltip showing the formatted petal length.

SShanmukh
93% match
Loading thumbnail…

Making a Scatter Plot

This example renders the Iris dataset as a scatter plot using React components and D3 scales. The visualization displays sepal width on the x-axis and sepal length on the y-axis, with each data point represented as a rectangle mark. The code constructs axes using D3’s `scaleBand` and `scaleLinear`, formats tick labels with `format`, and loads data via D3’s `csv` utility. SVG rendering is handled through React, with styling applied via CSS classes.

CCHOI SEUNG HYUN
93% match
Loading thumbnail…

Making a Scatter Plot

This example displays a scatter plot of Iris flower measurements, mapping sepal length on the x-axis and sepal width on the y-axis. The visualization loads data from a CSV file using D3’s `csv` function and renders circles as SVG marks positioned with `scaleLinear` scales. React components structure the axes and marks, while D3’s `format` helper and `extent` method compute tick labels and scale domains. The chart includes labeled axes and tooltips via SVG `<title>` elements, with data sourced from the standard Iris dataset.

Hhung2606
92% match
Loading thumbnail…

Making a Scatter Plot

This example visualizes the relationship between petal length and sepal width for iris flowers. The interactive scatter plot uses circle marks positioned by linear scales, with axes and labels created through reusable React components. The code loads the Iris dataset from a CSV file and renders it as an SVG. D3's `scaleLinear`, `extent`, and `format` utilities handle the data transformations and tick formatting, while React manages the component structure and state.

NNikhil Reddy Manda
92% match
Loading thumbnail…

creating Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length to the x-axis and sepal length to the y-axis as red circles with hover tooltips. Built with React and D3 v5, it uses `scaleLinear` for both axes, `csv` for data loading, and `extent` to set the domains. Axes are rendered as SVG groups with custom tick lines and labels, while the `Marks` component generates each circle and its title element for tooltip display.

RRaja Srinivas Nelluri
92% match
Loading thumbnail…

Making a Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length. Each point represents a sample flower, colored by species using a d3.scaleOrdinal color scale. The visualization is built with React and D3.js v5, using SVG circles for marks and custom components for axes. Data is loaded from a remote CSV file. The plot includes axis labels, tick marks, and interactive tooltips on hover, all rendered within a responsive fullscreen layout using the d3.scaleLinear and extent functions.

IIsh Takkar
92% match
Loading thumbnail…

7. Scatter Plot

A scatter plot of the classic Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and rendered as SVG, the visualization uses D3 scales and utilities, including `scaleLinear`, `extent`, and `format`, to compute the axes and tick marks. Each point is a circle with a tooltip displaying its x-value. The data is loaded asynchronously from a CSV file via D3's `csv` function.

DDenis Zjukow
91% match