Skip to main content
SimilarExport ZIP
100%

Fork of Scatterplot with Color Legend

✓ Published0🌍 Public
Nnexus1058
Last edited Apr 11, 2021
Created on Apr 8, 2021

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.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

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

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. The SVG is rendered using React components, with axes and scales built via d3.scaleLinear and d3.scaleOrdinal. A color legend identifies the three species, and hovering over a circle displays a tooltip with the petal length value. The data is loaded asynchronously using d3.csv from a remote source.

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

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width with each of the three species colored distinctly. The visualization uses React components to render SVG marks, with d3.scaleLinear for the x and y axes and d3.scaleOrdinal for the categorical color mapping. A color legend identifies species, and axes are generated from d3’s tick formatting. The data is loaded asynchronously using d3.csv, while the tooltip displays the petal length value on hover.

NNicolás Troncoso
95% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between different measurements (sepal length, sepal width, petal length, petal width) by selecting attributes for the x and y axes via React dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding of species, and renders circles as SVG marks. React state management tracks the selected attributes, while d3.csv loads the data and d3.format formats axis tick labels, with a color legend indicating species.

CChristian Potdevin
94% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This visualization uses a scatter plot to explore the classic Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis, with points colored by species via an ordinal color scale and SVG circles. The chart includes custom React components for axes and a discrete color legend, built with d3.scaleLinear, d3.scaleOrdinal, and d3.extent for domain computation. The data is loaded asynchronously using d3.csv, and the SVG rendering is handled through React’s JSX syntax.

YYedrup
94% match