Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot Simple

✓ Published0🌍 Public
Zzach b.
Last edited Jun 1, 2023
Created on Jun 1, 2023

This scatter plot visualizes the Iris Dataset, showing the relationship between sepal length and petal length across three species. The chart displays colored circles without axes, using D3 v7's `scaleLinear` and `extent` functions to map data values to SVG coordinates. The visualization is made responsive by applying a `viewBox` attribute instead of fixed width and height, while CSS `clamp` controls the SVG's displayed size. Data is loaded from a CSV file and parsed with `csvParse` before rendering.

AI-generated description

A scatter plot of the Iris Dataset with no axes.

fuffed around to make the SVG responsive. but running into problems with the content inside the iframe still reporting it's 960px wide.

changes

used:

.attr('viewBox', `0 0 ${width} ${height}`);

istead of:

.attr('width', width)
.attr('height', height);

in viz.js

&&

used:

width: clamp(350px, 50%, 800px);

in styles.css

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot Simple

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each flower represented by a fixed-radius circle. The plot has no axes, so it focuses purely on the distribution and clustering of the three species. The visualization uses D3 v7, loading data with `csvParse`, mapping values to pixel coordinates via `scaleLinear` and `extent`, and rendering circles through `selection.selectAll` with a `join`. The chart spans the full browser window, with data fetched asynchronously on initial render.

MMartha Cash
95% match
Loading thumbnail…

Fork of Scatter Plot Simple

A scatter plot of the Iris Dataset uses sepal length on the x-axis and petal length on the y-axis, with circles colored and positioned by species. No axes are rendered. The visualization loads data from a CSV file using the Fetch API and `d3.csvParse`, then applies `d3.scaleLinear` and `d3.extent` to map data values to pixel coordinates. Each data point is rendered as a circle with a fixed radius via `d3.selectAll` and `join`.

Ssnehareddygurram
95% match
Loading thumbnail…

Fork of Scatter Plot

This example plots sepal length against petal length for the Iris Dataset, with each flower represented as a circle. The visualization demonstrates a reusable scatter plot module composed with custom axis and labeling functions. It uses D3 v7 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and data joins via `selectAll` and `join`. The code loads the CSV data with `fetch` and `csvParse`, then renders the plot across the full browser window, coloring points by species.

Rradhadevarapu
94% match
Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. It encodes data points as circles using D3’s `scaleLinear` to compute positions from the dataset’s extent. The visualization is rendered as an SVG in a full-window view, with axes generated via `axisLeft` and `axisBottom`. Data is loaded as CSV using `d3.csv` with numeric parsing, and marks are joined to the DOM with `selectAll` and `join`. The code is a vanilla HTML/JavaScript implementation using D3 v6.

Ssirenajbpearl@gmail.com
94% match
Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. It encodes data points as circles using D3’s `scaleLinear` to compute positions from the dataset’s extent. The visualization is rendered as an SVG in a full-window view, with axes generated via `axisLeft` and `axisBottom`. Data is loaded as CSV using `d3.csv` with numeric parsing, and marks are joined to the DOM with `selectAll` and `join`. The code is a vanilla HTML/JavaScript implementation using D3 v6.

Ssirenajbpearl@gmail.com
94% match
Loading thumbnail…

Fork of Scatter Plot Simple

This scatter plot displays the classic Iris dataset, mapping sepal length along the x-axis and petal length along the y-axis. Each flower specimen is rendered as a circle, with all 150 data points plotted without axes or gridlines. The visualization uses D3 v7, loading data via a CSV fetch and parsing it with `csvParse`. The `scatterPlot` module constructs linear scales using `scaleLinear` and `extent`, then positions circles using the `join` API based on the selected measurement columns.

SSeekerzero
93% match
Loading thumbnail…

Fork of Scatter Plot Save

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, with each of the 150 flowers represented as a circle. The code uses D3 v7’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions to position points and render labeled axes. Data is loaded from an external CSV file and parsed with `csvParse`, then rendered using D3’s data join pattern with circles.

JJesper Martinsson
93% match
Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flower samples. Each circle represents a data point, with axes labeled using D3's scaleLinear, axisLeft, and axisBottom APIs, and tick text styled at 24px. The visualization fills the browser window by setting SVG dimensions to window.innerWidth and innerHeight, reading the dataset from data.csv via d3.csv. Circle positions are computed by mapping data values through linear scales with defined margins and a fixed radius of 5 pixels.

YYash_Mistry
93% match