Skip to main content
SimilarExport ZIP
100%

scatter plot

✓ Published1🌍 Public
Ssravya010
Last edited Mar 9, 2026
Created on Mar 9, 2026
Forked from bar chart

This scatter plot uses the classic Iris dataset to compare sepal length and petal length across three flower species, with a legend and interactive tooltips. The D3.v7 code loads CSV data via `d3.csv`, applies `d3.scaleLinear` for axes and `d3.scaleOrdinal` for categorical colors. Points are rendered as SVG circles, with a grid drawn using `d3.axisBottom` and `d3.axisLeft`, and mouse events enlarge points and display detailed measurements.

AI-generated description
MIT Licensed

Similar vizzes

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 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
92% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, using petal length on the x-axis and sepal length on the y-axis. The code loads the data via `d3.csv`, maps values to screen coordinates with `d3.scaleLinear` and `d3.extent`, and renders SVG circles. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`. Each point includes a `<title>` element for hover tooltips. The visualization fills the browser window and is implemented with D3 v7.

Wwspwll@gmail.com
92% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris flower dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each data point is rendered as a circle with an SVG `<title>` element that reveals precise coordinates on hover. The visualization uses `d3.scaleLinear` to map data values to pixel positions within specified margins, while `d3.axisBottom` and `d3.axisLeft` create labeled axes. The code loads data asynchronously via `d3.csv` and generates the plot with `d3.select` and `.join('circle')`.

Vvivhogan@gmail.com
92% match
Loading thumbnail…

D3 Scatter Plot

This example displays the classic Iris dataset as an interactive scatter plot, mapping petal length on the x-axis and sepal length on the y-axis to reveal patterns across the flower samples. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct axes and render circles in SVG, with data loaded asynchronously via `d3.csv` from a GitHub gist. The plot fills the entire browser window, using a simple margin-based layout and a fixed point radius to represent each data point.

AAaron
92% match
Loading thumbnail…

d3 scatter plot

This example visualizes the classic Iris dataset as a scatter plot, comparing petal length on the x-axis with sepal length on the y-axis for 150 flowers. The visualization uses D3 v7 with vanilla JavaScript to load the CSV data via `d3.csv`, parse the numeric fields, and render SVG circles positioned through `d3.scaleLinear` scales. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, while the chart fills the entire browser viewport with margins applied around the plot area.

FFrancisco Ibelles
92% match
Loading thumbnail…

Iris Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis. Each of the 150 flowers appears as a colored point, with a legend distinguishing the three species (setosa, versicolor, and virginica) using a pastel ordinal color scale. Built with D3 v7, the code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear` for axes, and renders SVG circles, axis ticks, labels, and a custom legend.

Mmaddulanagasanjana@gmail.com
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the classic Iris dataset, displaying sepal length against sepal width for three species of iris flowers. Each point represents a sample, color-coded by species (setosa, versicolor, virginica) using blue, green, and orange, and includes interactive tooltips that reveal exact measurements on hover. The visualization is built with D3.js v7, using `d3.csv` to load the local CSV data, `d3.scaleOrdinal` for color mapping, and `d3.scaleLinear` to map data to pixel coordinates. The SVG rendering includes labeled axes, a legend, and smooth tooltip transitions for enhanced readability.

LLikhitaMudagereShivaraj@my.unt.edu
92% match