Skip to main content
SimilarExport ZIP
100%

Grouped Scatter Plot

✓ Published3🌍 Public
WWaseem Medhat
Last edited Oct 22, 2020
Created on Oct 22, 2020
Forked from Grouped Bar Chart

This visualization displays sepal width against sepal length for Iris flowers, with each species occupying its own horizontal band created by d3.scaleBand. The React-based implementation uses d3.scaleLinear for both axes and renders SVG circles via the Marks component, with axes generated by AxisBottom and AxisLeft. Data is loaded as CSV from a remote source using d3.csv, and each species chart receives filtered data through a GroupChart component that positions the smaller plots vertically.

AI-generated description

Sepal width (Y) vs. sepal length (X) of Iris flowers, grouped by species.

MIT Licensed

Similar vizzes

Loading thumbnail…

Grouped Scatter Plot

A grouped scatter plot displays the relationship between sepal length and sepal width for three Iris species, with each species rendered in its own horizontal band. The visualization uses React and D3 v6 to compose scales and axes, with `scaleBand` positioning species groups and `scaleLinear` mapping measurements. SVG circles represent individual flowers from the Iris dataset, and tooltips show exact values. Axis components are built from custom React components, while `d3.csv` loads the data from a remote source.

CChristian Magelssen
96% match
Loading thumbnail…

Grouped Scatter Plot (Column Layout)

This grouped scatter plot displays the relationship between sepal width and sepal length for Iris flowers, split into three panels by species. Each panel shares the same y-axis scale but uses a separate x-scale constrained to its column width. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning, and loads data from a CSV via `d3.csv`. Axes are drawn manually as SVG lines and text elements, with a title above each column.

WWaseem Medhat
94% match
Loading thumbnail…

Fork of Grouped Scatter Plot

This example visualizes the Iris flower dataset, showing sepal width plotted against sepal length. The scatter plot is grouped by species, with each species rendered in its own horizontal band. The visualization uses React components to build the SVG chart, with D3 scales (scaleLinear for x and y axes, scaleBand for species grouping) and D3’s extent and format functions. Data is loaded asynchronously from a remote CSV file using D3’s csv method, and each point is drawn as a circle with a tooltip displaying the sepal length.

Aall-over-yet
92% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between sepal length and sepal width for Iris flowers, with each circle representing a data point from the Iris dataset. Built with React and D3 v5, the chart uses D3's scaleLinear to map data to SVG coordinates, while React components render the axes and marks. AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component creates circles with tooltips. The y-axis label is rotated vertically using an SVG transform.

EElliot Hill
91% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width for individual iris flowers. The data is loaded from a CSV file using d3.csv and rendered as SVG circles with React components. Axes are generated via custom AxisBottom and AxisLeft components using d3.scaleLinear for positioning, with d3.format applied to tick labels for compact number display. The visualization uses React state via useEffect to manage asynchronous data loading, and includes native SVG title elements for tooltips.

Nnkarinti
91% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against sepal width on the y-axis for individual flower specimens. The visualization uses React with d3.scaleLinear scales and SVG rendering, with axes generated by custom React components. Data is loaded asynchronously from a CSV file using d3.csv, with string values parsed into numbers. The plot includes formatted tick labels, axis titles, and tooltips on each circle via SVG title elements, all styled with Poppins font and subtle gray colors.

Iiblub
91% match
Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis, with each flower’s species encoded by a circular mark. The React-based chart uses d3.scaleLinear for both axes, d3.extent to compute domains, and custom SVG axis components with tick labels formatted via d3.format. Data loads asynchronously through d3.csv, and each circle includes a native SVG title tooltip showing the sepal length value.

Aafcchilders
91% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between sepal width and sepal length for Iris flowers, with each circle representing a data point and showing its population value as a tooltip. The data loads from a CSV file via the `csv` function in d3.v5, while React manages the component state. The visualization uses `scaleLinear` for both axes, with `extent` and `nice` to set domains, and custom `AxisBottom` and `AxisLeft` components render ticks and labels. The SVG circles use d3 scales and formatters to position and annotate the marks.

11993-INDALKAR
91% match