Scatter Plot with Color Legenf

100%

Scatter Plot with Color Legenf

✓ Published1🌍 Public

Last edited Jun 1, 2021

Created on Jun 1, 2021

This interactive scatter plot visualizes the Iris Dataset, enabling users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus allow the selection of attributes for the x and y axes, while a color legend encodes species. The visualization uses D3 v5 for data scaling and axis generation, React with SVG for rendering, and a color legend implemented with a sequential ordinal scale. The marks are interactive circles with tooltips.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus let viewers switch the X and Y axes among four numeric attributes, while a color legend distinguishes species using d3.scaleOrdinal with three categorical colors. The visualization renders as SVG using React components, with d3.scaleLinear handling axis scales and d3.extent computing domains. Marks are drawn as colored circles with tooltips showing values. The data loads asynchronously via d3.csv from a GitHub gist.

MMichael Bruno

97% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which attributes appear on the x and y axes, while a color legend distinguishes species using d3.scaleOrdinal. The visualization uses React to manage state and render SVG elements, with D3 scales (d3.scaleLinear, d3.extent) handling coordinate mappings and axes. Data loads asynchronously via d3.csv from a remote source.

Ttharuta

97% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare sepal and petal measurements across three flower species through dropdown menus for the x and y axes. Each point is colored by species using a d3.scaleOrdinal color scale with an accompanying legend. Built with React and D3 v6, the visualization renders as an SVG and uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.csv for data loading.

LLaura Johnson

97% match

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The chart uses D3 v6 scales and SVG rendering within a React framework, with dropdown menus to switch X and Y attributes. Hovering over the color legend highlights points of a selected species while fading others, using d3.scaleOrdinal for categorical coloring. The visualization includes axes with formatted tick labels, a color legend, and tooltips via SVG title elements.

JJohn Huang

96% match

Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Users can dynamically select which attributes to plot on the X and Y axes via dropdown menus, while a color legend distinguishes species using a categorical d3 scaleOrdinal palette. The visualization is rendered as an SVG using React components, with d3 scaleLinear handling axis scaling and the d3 csv loader fetching the dataset. Marks are drawn as circles with tooltips showing the x-axis value.

CChris Knight

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four measured attributes (sepal length/width, petal length/width) across three flower species. Dropdown menus dynamically change the x- and y-axis variables, while a color legend distinguishes species using a d3.scaleOrdinal with categorical colors. Built with React and d3.v5, the SVG-based visualization renders axes via custom components, circles with tooltips, and a color legend that updates proportionally to the selected attributes. Data is loaded asynchronously from a CSV file using d3.csv.

SSam Hege

96% match

Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements via dropdown menus that select the x and y axes. The chart displays points colored by species through a D3 scaleOrdinal color legend. Built with React and D3 v5, it renders as SVG using d3.scaleLinear for axes, d3.extent for domains, and custom React components for axes, marks, and the color legend.

MMark Lam

96% match

Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which numerical attribute appears on each axis, while the color legend identifies species using d3.scaleOrdinal. The visualization is built with React components, using d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.csv for data loading. The SVG rendering includes separate AxisBottom, AxisLeft, ColorLegend, and Marks components, with native browser tooltips on each circle showing formatted values.

Aalexandermodell

96% match