Skip to main content
SimilarExport ZIP
100%

Fork of All Info In One - Studying of D3 Scatter Plot

✓ Published0🌍 Public
CCurran Kelleher
Last edited May 8, 2021
Created on May 8, 2021

This visualization displays the Iris dataset as an interactive scatter plot, encoding petal length, petal width, and sepal length along the x-axis, y-axis, and circle radius respectively. Species are distinguished by color (blue, red, and black). Built with D3 v6, it loads CSV data using the `d3.csv` method with custom row parsing, then maps values through `d3.scaleLinear` and `d3.scaleSqrt` functions. SVG circles are rendered with axes generated via `d3.axisLeft` and `d3.axisBottom`, using the data-join pattern.

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

All Info In One - Studying of D3 Scatter Plot colors by species

This visualization uses the Iris Dataset to show how sepal and petal measurements relate across three iris species. It displays petal length on the x-axis, petal width on the y-axis, and sepal length as the size of each circle. Species are encoded by color, with setosa in blue, versicolor in red, and virginica in black. Built with D3 v6, the example uses `d3.csv`, `d3.scaleLinear`, `d3.scaleSqrt`, and SVG circles with tooltips to reveal exact values on hover. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`.

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

Fork of Iris Dataset Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length and width on the x- and y-axes while coloring each point by species. Built with D3 v6, it renders circles as SVG elements, using `d3.scaleLinear` for coordinate scaling and `d3.axisLeft`/`d3.axisBottom` for axes. The code loads CSV data via `d3.csv`, parses numeric fields, and positions points within a full-window SVG.

RRadhakrishna246
91% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against petal width for three iris species, each colored blue, red, or black. It uses D3 v6 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render an SVG scatter plot. Circles are positioned on the x- and y-scales, with the underlying sepal measurements stored as `rx` and `ry` attributes. The visualization fills the browser window and includes labeled tick marks with enlarged font sizes.

Bbindhureddy98
91% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against petal width for three iris species, each colored blue, red, or black. It uses D3 v6 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render an SVG scatter plot. Circles are positioned on the x- and y-scales, with the underlying sepal measurements stored as `rx` and `ry` attributes. The visualization fills the browser window and includes labeled tick marks with enlarged font sizes.

Bbindhureddy98
91% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This D3.js (v6) scatter plot visualizes the Iris Dataset, mapping petal length and width for each flower sample while encoding species with distinct colors (purple, red, teal). The SVG rendering uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Circular marks are positioned via `selectAll('circle').join('circle')` and labeled with rotated axis titles for petal length and width. The plot fills the browser window and includes a 24px tick font size for readability.

YYbg99g
91% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This is a D3.js scatter plot visualizing the Iris Dataset, separating flower species by color (blue, red, black) based on petal length and width. The chart maps sepal dimensions to circle radii, creating variable-sized points. It loads data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` for scales, and renders axes with `d3.axisLeft` and `d3.axisBottom`. Drawn as SVG circles with `d3.selectAll().join()`, it includes labeled axes for petal and sepal measurements.

Ggopiganta
91% match