Scatter Plot with Color Legend

100%

Scatter Plot with Color Legend - Lecture 34

✓ Published1🌍 Public

Last edited Mar 14, 2022

Created on Mar 13, 2022

Forked from Scatter Plot with Color - Lecture 33

This interactive scatter plot from Lecture 34 visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus let viewers select which quantitative attributes appear on the x and y axes, while a color legend distinguishes the three iris species using an ordinal color scale. Built with React and D3 v5, the SVG rendering uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.extent for domain calculations, with custom React components for axes, marks, and legend rendering.

AI-generated description

A scatter plot with color legend of The Iris Dataset with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color - Lecture 33

A scatter plot of the Iris dataset renders sepal and petal measurements as colored circles, with species determining the color. Two dropdown menus let viewers select which attributes appear on the x and y axes. The visualization uses D3 v5’s linear and ordinal scales for positioning and coloring, React for the interactive interface, and SVG for rendering.

Rroc286

95% match

Loading thumbnail…

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

94% 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. 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

94% 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

94% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that control the x and y axes. Points are colored by species using a d3.scaleOrdinal with a corresponding legend showing the three Iris varieties. The visualization is built with React and D3 v6, rendering SVG circles and axes through custom components like AxisBottom, AxisLeft, and Marks, with data loaded via d3.csv from a remote gist.

CCodeDuckie99

94% match

Loading thumbnail…

Scatter Plot with Color Legenf

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.

SSabin Bhandari

94% match

Loading thumbnail…

Scatter plot with Colors Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements along the x- and y-axes while using color to distinguish species. Users can select which attributes to plot from dropdown menus. The visualization uses React with D3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and renders SVG circles with tooltips. A color legend maps species to distinct colors, with axis labels and tick marks generated by custom React components.

Kkragovic

94% 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

94% match