Fork of D3 Scatter Plot

100%

Fork of D3 Scatter Plot

✓ Published0🌍 Public

Last edited Jan 17, 2023

Created on Jan 17, 2023

This visualization uses D3 v6 to render a scatter plot of the Iris Dataset, showing the relationship between petal length and sepal length. It employs d3.csv for data loading, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to display the scales. Data points are drawn as SVG circles, with margins and a full-window responsive sizing. The dataset is fetched from a GitHub Gist, and numeric fields are parsed from strings before plotting.

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

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

95% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length on the x-axis against sepal length on the y-axis. Each flower is drawn as a fixed-radius circle in SVG. The code uses d3.csv to load and parse data, d3.scaleLinear with d3.extent for scales, and d3.axisLeft plus d3.axisBottom to render axes with large tick labels. The visualization fills the browser window, with margins applied, and data points are appended via selection joins.

Wwieswies

95% match

Loading thumbnail…

Fork of D3 Scatter Plot

This visualization displays the classic Iris Dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Circles represent individual flower samples, with axes rendered using D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The code loads data via `d3.csv`, parses numeric columns, and appends SVG circles sized with a fixed radius. It leverages D3 v6, fetching the dataset from a GitHub Gist and responsively filling the browser window with full viewport dimensions.

DDuckGorilla

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

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

95% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flowers. The visualization uses D3 v6 to load the CSV data, scale the x and y axes with `d3.scaleLinear`, and render circles as SVG marks. Axes are added using `d3.axisLeft` and `d3.axisBottom`, with the plot sized to the full browser window. The code demonstrates a clean mapping of data fields to spatial positions.

Zzhuomo-maker

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

95% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, showing the relationship between petal length on the x-axis and sepal length on the y-axis. It uses d3.csv to load the data, then employs d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to position and label the circles. The SVG is sized to the full window, with margins applied to the scales and axes. Data points are rendered as filled circles using a data join, demonstrating a straightforward workflow for quantitative comparison in D3 v6.

IIndhuKrishnaraj

94% match