Skip to main content
SimilarExport ZIP
100%

Fork of Grouped Scatter Plot

✓ Published0🌍 Public
Aall-over-yet
Last edited Apr 6, 2021
Created on Apr 6, 2021

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.

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

Grouped Scatter Plot

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.

WWaseem Medhat
92% match
Loading thumbnail…

Fork of Scatter Plot

This visualization shows the relationship between sepal length and sepal width in the Iris dataset, with each flower represented by a circle. The scatter plot uses D3’s `scaleLinear` to map data values to SVG coordinates, with axes rendered by custom components that generate tick lines and labels. The React-based code loads the dataset via D3’s `csv` function, then lays out the plot within an SVG canvas, using a Poppins font and muted color palette for the marks and gridlines.

Aadewole-top
91% match
Loading thumbnail…

Fork of Scatterplot with Iris Data

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length to the x-axis and sepal width to the y-axis, with each point colored by species. The React component uses d3.scaleLinear and d3.extent to set the scales, while d3.csv loads the data from a gist. SVG circles are rendered with embedded tooltips showing the sepal length value on hover. The chart includes labeled axes, a bottom axis with tick formatting via d3.format, and a left axis, all built from custom React components that generate SVG elements.

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

Fork of Scatter Plot-iris data

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and sepal width to the y-axis. Each flower is rendered as a large blue circle using SVG within a React framework, with the plot area offset by margins via a group transform. The code loads data from a remote CSV file using D3’s `csv` function, converts values to numbers, and scales positions with `scaleLinear` and `extent`. The chart fills the browser window, as the body has no margin and hidden overflow.

NNita
90% match
Loading thumbnail…

Fork of Scatterplot with Iris Data

This example visualizes the Iris dataset as a scatterplot, mapping sepal length on the x-axis and sepal width on the y-axis. Each circle represents a sample, colored uniformly in teal, with a title tooltip showing the x-value. The visualization is built using React and D3 v7, with scales from `d3.scaleLinear` and axes rendered as SVG components. Data is loaded asynchronously via `d3.csv` from a remote gist, and the layout uses fixed margins and SVG groups for positioning.

Iindira-antgrvty
90% match
Loading thumbnail…

Fork of Scatterplot with Iris Data

This example visualizes the Iris dataset as a scatterplot, mapping sepal length on the x-axis and sepal width on the y-axis. Each circle represents a sample, colored uniformly in teal, with a title tooltip showing the x-value. The visualization is built using React and D3 v7, with scales from `d3.scaleLinear` and axes rendered as SVG components. Data is loaded asynchronously via `d3.csv` from a remote gist, and the layout uses fixed margins and SVG groups for positioning.

Iindira-antgrvty
90% match