Fork of Scatter plot with color legend

100%

Fork of Scatter plot with color legend

✓ Published1🌍 Public

Last edited Dec 27, 2020

Created on Dec 27, 2020

This visualization displays the Iris dataset using an interactive scatter plot with linked dropdown menus for selecting the X and Y axes. Each point represents a flower specimen, colored by species with a corresponding color legend on the right side. The code uses React with hooks for state management and d3-scale's scaleLinear, scaleOrdinal, and extent functions, while rendering axes and marks as SVG elements through custom React components.

AI-generated description

A program that render The Iris Dataset using uses React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus and Colour and Legend

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four flower measurements by switching the X and Y axes via dropdown menus. Each point is colored by species, with a legend clarifying the color encoding. The visualization is built with React functional components and renders SVG marks using D3 v5 scales. It leverages `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and React state hooks to manage attribute selections.

NNikita Toropov

94% match

Loading thumbnail…

Fork of Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to compare different measurements (sepal and petal length and width) by selecting from dropdown menus. React manages the UI state and rendering while D3 utilities (scaleLinear, scaleOrdinal, extent, csv) handle data loading, scales, and axes. Points are colored by species using an ordinal color scale, with native SVG tooltips providing values on hover. The visualization demonstrates a hybrid approach where D3 calculates scales and CSV parsing, while React components render the SVG elements.

Nnexus1058

93% match

Loading thumbnail…

Fork of Scatter plot with color legend

This fork of a scatter plot visualizes the classic Iris dataset, allowing interactive exploration of relationships between sepal and petal measurements. The React-based graphic uses D3 scale functions (`scaleLinear`, `scaleOrdinal`) to map data attributes to x/y positions and categorical species to a color legend. Two dropdown menus let users select which numerical attributes to compare, while the SVG rendering updates immediately. The color legend encodes the three Iris species using distinct hues. The code demonstrates a modular approach with separate components for axes, marks, and the legend, using D3 utilities for data loading, scaling, and tick formatting.

LLewis Ward

92% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris dataset as an interactive scatter plot, with dropdown menus to select which sepal or petal measurements appear on the x and y axes. Points are color-coded by species using an ordinal scale, with a legend mapping each species to its corresponding color. The visualization is built as a React application that fetches data with d3.csv, uses d3.scaleLinear for positioning and d3.scaleOrdinal for color, and renders axes and marks as SVG elements via custom React components.

AAudrey

92% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width with points colored by species. Hovering over a species name in the color legend dims all other points while highlighting the selected group, implemented through React state management and conditional opacity. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles via React components. Axis ticks and color legend items are generated from d3 scale domains, with native SVG `<title>` elements providing tooltips on data points.

SShantanu

92% match

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis for each flower sample. The plot uses a color legend to distinguish three iris species, and hovering over a legend label fades out all points not belonging to that species while highlighting the selected group. The visualization is rendered with React and SVG, using d3.scaleLinear for positioning, d3.scaleOrdinal for species colors, and custom React components for axes and the interactive legend.

JJames Huang

92% match

Loading thumbnail…

Fork of polished scatterplot with color

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the X and Y axes via ReactDropdown menus. The plot encodes flower species through a d3.scaleOrdinal color scale applied to circle marks. The visualization is built with React and D3 v7, using d3.scaleLinear for axes, d3.extent for domains, and d3.csv to load the remote dataset. SVG rendering displays axes and marks, with a tooltip via the title element.

BBlake McCarty

91% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. It uses React and d3.scaleLinear for axes, d3.scaleOrdinal for the categorical color scale, and SVG circles for marks. Hovering over a species in the color legend highlights the corresponding points while dimming others, implemented through React state and opacity transitions. The chart is rendered with SVG and includes axis labels, a color legend, and tooltips.

Ccshm407

91% match