Fork of D3 Scatter Plot

100%

Fork of D3 Scatter Plot

✓ Published0🌍 Public

Last edited Aug 2, 2024

Created on Aug 2, 2024

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Scatter Plot

Ssirenajbpearl@gmail.com

100% 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 uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, compute scales, and render axes. Circles are drawn with SVG via `selectAll` and `join`, with coordinates transformed from data values to pixel positions. The plot fills the browser window and includes a 24-pixel tick font for readability. Data is fetched from a GitHub Gist, and parsing converts numeric fields with `+d`.

EEmnaAbbes

97% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Built with vanilla JavaScript and D3 v6, the SVG circles are positioned using `d3.scaleLinear` with domains from `d3.extent` and ranges derived from the window’s dimensions. Data is loaded via `d3.csv` from a GitHub Gist, with numeric columns parsed on ingestion. Axis rendering via `d3.axisLeft` and `d3.axisBottom` is present but commented out, leaving the chart with only the plotted points.

AAdan Rodriguez

96% 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

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for scaling, and `axisLeft` and `axisBottom` for axes. The SVG circles are rendered via `selectAll` and `join`, with a fixed radius. The plot fills the browser window, using `window.innerWidth` and `window.innerHeight` to size the chart, and includes tick labels with 24px font styling.

JJordi

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example renders the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v6’s `csv` loader to fetch the data, `scaleLinear` with `extent` to compute scales, and `axisLeft`/`axisBottom` to draw the axes. The plot is drawn as SVG circles using `select` to append elements and a `join` operation for efficient circle creation. The visualization adapts to the full browser window, with tick labels styled at 24 pixels.

BBakunya | Kirisaki Rem

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and sepal length onto the horizontal and vertical axes. Each flower is drawn as a circle with a fixed radius. The visualization uses the D3.js v6 API, including `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` to render tick labels. The SVG canvas fills the browser window, with circles positioned via data-driven coordinates.

JJyothicherukuri

96% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset using a D3 scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses d3.csv to load the data, d3.scaleLinear and d3.extent to compute scales, and d3.axisLeft and d3.axisBottom to render axes. The SVG circles are positioned using the d3.select and join API, with a radius of 5 pixels. The plot fills the entire browser window by setting the SVG dimensions to window.innerWidth and window.innerHeight.

Ppakoensi

96% match