Skip to main content
SimilarExport ZIP
100%

Scatter Fun

✓ Published0🌍 Public
Jjabowen2020@gmail.com
Last edited Feb 19, 2024
Created on Feb 19, 2024
Forked from D3 Scatter Plot

This scatter plot displays the Iris dataset, mapping sepal length and sepal width onto a full-window SVG canvas. Each flower is rendered as a circle with a fixed radius of five pixels. The visualization loads the data from a remote CSV file using `d3.csv` and parses numeric fields. It applies `d3.scaleLinear` to compute the x and y scales, and `d3.axisLeft` and `d3.axisBottom` to draw the corresponding axes. The plot fills the entire viewport, with margins applied for axis placement.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across 150 individual flowers. Each circle represents one sample, with its position determined by these two measured attributes while a green, semi-transparent fill makes overlapping points visible. The visualization is built using D3 v6, loaded via UNPKG, and rendered as SVG. Code imports functions like `scaleLinear`, `axisLeft`, and `axisBottom` from the D3 module to construct the axes and scales. Data is loaded from a local CSV file using D3’s `csv` method.

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

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length and sepal width for individual flowers. It uses D3 v7’s `csv` loader to parse the data, `scaleLinear` for x and y axes, and SVG `circle` elements for points. Axes are drawn with `axisLeft` and `axisBottom`, while hover effects change circle color to red via CSS.

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

Scatter Plot

A D3 scatter plot displays the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using linear scales and axis generators. Each flower is rendered as a circle with a fixed radius of five pixels. The visualization fills the browser window by sizing the SVG to the viewport dimensions. It loads CSV data with `d3.csv`, parses numeric fields, and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot.

RRupeshGandham
91% match
Loading thumbnail…

Scatter plot - iris data set - axis

This scatter plot visualizes the classic iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Each circle represents an individual flower, with a fixed radius and semi-transparency to reveal overlapping points. The visualization is built with D3 v6, using `d3.csv` to load the data, `d3.scaleLinear` and `d3.extent` for scaling, and `d3.axisBottom` for the x-axis. The SVG rendering is responsive to the window size, with margins applied to the plot area.

NNita
91% match
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the classic Iris dataset, plotting sepal length against sepal width for 150 flower samples. The code loads the data from a local CSV file and uses d3.csv, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the plot, which renders as red semi-transparent circles in an SVG. Each circle represents a single iris flower, and the chart includes labeled axes, a title, and grid lines created via tickSize. The dataset comes from the UCI Machine Learning Repository.

TThe-World-Muda
91% match