Skip to main content
SimilarExport ZIP
100%

scatter

✓ Published0🌍 Public
SShafi
Last edited Jun 24, 2023
Created on Jun 24, 2023

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width. Each data point is colored by species, with a color legend identifying the three categories. The React-based component uses d3.scaleLinear for axes, d3.scaleOrdinal for the color mapping, and d3.csv to load the data. The SVG rendering includes custom axis components and circle marks with tooltips.

AI-generated description

A scatter plot of The Iris Dataset with color legend.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the classic Iris dataset, displaying petal length against sepal width with each of the three species represented by a distinct color. Using React and D3 v5, the visualization leverages d3.scaleLinear for both axes and d3.scaleOrdinal for the categorical color mapping. The SVG rendering includes custom axis components (AxisBottom, AxisLeft) and circle marks with native tooltips. Data is loaded asynchronously via d3.csv from a remote gist URL.

Ttrissentety
94% match
Loading thumbnail…

iris scatter

This example shows a scatter plot of the Iris flower dataset, comparing petal length against sepal width. The visualization uses React to render SVG circles positioned via d3.scaleLinear scales, with d3.axisBottom and d3.axisLeft for tick marks. Data is loaded asynchronously from a CSV file using d3.csv, with numeric parsing applied to each measurement field. The plot includes axis labels and a clean, minimal style with teal-colored marks on a white background.

NNart Williamson
94% match
Loading thumbnail…

Scatter Chart

This scatter chart visualizes the Iris dataset, plotting petal width against sepal width for individual flowers. The visualization uses React to render SVG elements, with D3 v5 utilities like `scaleLinear` and `extent` handling the data scaling and domain calculations. Custom React components construct the axes and circular marks, while the data is loaded asynchronously via D3's `csv` function. The chart includes labeled axes and gridlines, with each data point rendered as a circle that reveals its value on hover.

BBetty
94% match
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. The visualization uses React to render SVG elements, with d3.scaleLinear for positioning and d3.scaleOrdinal for categorical color mapping. Custom React components for axes and marks handle the rendering, while d3.csv loads and parses the dataset. A d3.format function formats tick labels, and the color scheme distinguishes the three iris species.

BBen Brophy
93% match
Loading thumbnail…

scatter

This scatter plot displays the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v7, it uses `scaleLinear` for both axes, `AxisBottom` and `AxisLeft` components to render ticks, and `Marks` to draw SVG circles with tooltips. Data is loaded asynchronously via `csv` and parsed as numbers.

TTarun Kumar Bosupally
93% match
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for individual flowers. Using D3.js scaleLinear and scaleOrdinal, the chart positions each point and colors it by species with a categorical palette. React components render SVG axes, tick marks, and circles, with tooltips providing precise values. The data is loaded asynchronously from a CSV URL using D3's csv method.

WWolfgang
93% match
Loading thumbnail…

Scatter Plot with Color

This example visualizes the Iris dataset as a scatter plot, mapping petal length to the x-axis, sepal width to the y-axis, and coloring each circle by species using a D3 ordinal scale. React renders the SVG, with reusable axis and mark components built on D3 scales like `scaleLinear` and `scaleOrdinal`. The data is loaded from a remote CSV via D3’s `csv` utility, and tooltips display formatted values through SVG `<title>` elements.

Yyejichun@naver.com
93% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. Built with React and D3 v5, it uses `scaleLinear` to create axes and renders circles as SVG marks. The `axisBottom` component formats tick labels with D3's `format` function, while tooltips display values via SVG `<title>` elements. The data loads asynchronously from a CSV using D3's `csv` parser.

Llefat92
93% match