Skip to main content
SimilarExport ZIP
100%

Lindy

✓ Published1🌍 Public
Llindy0119
Last edited Oct 1, 2022
Created on Oct 1, 2022

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for three flower species. Built with React and D3 v5, it renders SVG circles colored by species using d3.scaleOrdinal. Hovering over the color legend highlights the corresponding species by dimming non-matching points with reduced opacity, while the filtered points remain fully visible. The chart includes labeled axes rendered via React components and d3.ticks.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot - Iris

This scatter plot visualizes the classic Iris dataset, showing the relationship between petal length and sepal length for three flower species. The D3 v5 code uses `scaleLinear` and `extent` to map data values to SVG coordinates, with React components handling axis rendering and circle marks. Each species receives a distinct color and opacity through CSS classes. The visualization includes labeled axes with formatted tick marks and a native SVG `<title>` tooltip that reveals the species name on hover.

FFlorian Kotthoff
88% match
Loading thumbnail…

Interactive Scatterplot

This interactive scatterplot visualizes the classic Iris flower dataset, letting users explore relationships between sepal and petal measurements across three species. Two dropdown menus dynamically change which attribute is plotted on the x and y axes, while a color legend distinguishes species and supports hover filtering to fade unrelated points. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and renders all marks as SVG circles with native tooltips.

LLawrence Liu
87% match
Loading thumbnail…

Scatter Plot - React, D3

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three plant species distinguished by color. The plot uses React components to render SVG elements, with D3's scaleLinear and scaleOrdinal handling axes and color encoding. Axis ticks are generated from the scales, and hovering over a circle reveals its exact petal length via a native SVG <title> tooltip. The color legend displays the species categories, and the chart includes D3-driven axis labels and margins.

NNelson M
87% match
Loading thumbnail…

Scatter Plot, Color & Interactive Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width, with points colored by species. An interactive legend allows users to hover over species names, highlighting only the corresponding data points and fading the others. The visualization is built with React and rendered as SVG, using d3.scaleLinear for axes and d3.scaleOrdinal for color mapping. Point tooltips display the precise petal length value using d3.format.

AAndre J Denais
87% match
Loading thumbnail…

Scatter Plots with Color

This interactive scatter plot visualizes the Iris flower dataset, showing petal length against sepal width. Each point is colored by species using a categorical color scale, and hovering reveals a tooltip with the formatted petal length. Built with React and D3 v5, the visualization uses React components for axes and marks, with D3's `scaleLinear` and `scaleOrdinal` for positioning and coloring. SVG rendering handles the circles, while a custom tick formatter appends units to axis labels.

Llefat92
87% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width. The chart uses color-encoded circles to represent different iris species, with hover interactions on the legend highlighting data points of a selected species. Built with React and D3 (d3.scaleLinear, d3.scaleOrdinal), the visualization renders as SVG, featuring both full and filtered data marks with faded opacity for non-selected categories.

Yyptang5488
87% match
Loading thumbnail…

Iris_Scatter

This interactive scatter plot visualizes the Iris dataset, showing relationships between four flower measurements (sepal length/width, petal length/width) across three species. Users select which attributes to plot on the x- and y-axes via ReactDropdown menus, with points colored by species. Hovering over the color legend highlights one species while fading the others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles, with axes rendered as custom tick components.

Eexchoco
87% match
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width with each of the three iris species colored distinctly. The visualization uses React with D3 v5, employing d3.scaleLinear for both axes and d3.scaleOrdinal for color mapping. Data is loaded via d3.csv from a GitHub gist, and axes are rendered as custom React components. SVG circles represent individual flowers, with native `<title>` elements providing tooltips on hover.

MMilena Belianovich Holtman
87% match