interactive color legend iris scatter plot

100%

interactive color legend iris scatter plot

✓ Published0🌍 Public

Last edited Feb 8, 2022

Created on Feb 6, 2022

This interactive scatter plot displays the classic Iris dataset, mapping sepal and petal measurements along user-selectable x and y axes. A color legend categorizes the three iris species, and hovering over a species name dims the other points to highlight the selected group. Built with React and D3 v5, the visualization uses dropdown menus to swap axes and D3 scales (scaleOrdinal, scaleLinear) to position circles and assign colors. SVG rendering handles the marks and axes, while the legend’s mouse events filter and emphasize data by species.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatterplot displays the Iris dataset, plotting sepal and petal measurements against each other with species encoded by color. Hovering over a species in the color legend dims all other data points while highlighting the selected species. Users can change the X and Y axes via dropdown menus. The visualization uses React with D3 scales for positioning and coloring, rendering SVG circles and axis ticks through custom React components.

Ssmile2git

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the classic Iris dataset, letting users explore relationships between sepal and petal measurements by selecting variables from dropdown menus. A color legend maps the three Iris species to distinct hues; hovering over a species name highlights only those data points while fading all others, making group distinctions immediately apparent. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for the categorical color mapping, and native SVG circles for marks. The data is loaded as CSV using D3's `csv` utility.

TThe-World-Muda

95% match

Loading thumbnail…

Interactive color legend

This interactive scatterplot displays the Iris dataset, mapping sepal and petal measurements against each other. Users can select which attributes appear on the x- and y-axes via dropdown menus, while a color legend encodes species. Hovering over a legend item temporarily fades and isolates the corresponding species’ points. The visualization uses React for state management, D3’s scaleLinear, scaleOrdinal, and csv loader, and renders SVG circles and axes.

LLewis Ward

95% match

Loading thumbnail…

Interactive Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset from a gist, showing measurements of sepal length, width, petal length, and width for three iris species. Users select the x and y axes via React dropdowns, and hovering over the color legend highlights data points of a selected species while fading the others. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders as SVG with React components, and implements the color legend with interactive hover events.

SSabin Bhandari

95% match

Loading thumbnail…

Interactive Color Legend

An interactive scatterplot of the Iris dataset lets users explore relationships between sepal and petal measurements, with colored dots representing species. A clickable color legend on the right highlights points of a selected species while dimming the others, using React state to track the hovered value. Built with React and D3 v5, the plot renders as SVG and uses scales from `d3.scaleLinear` for axes and `d3.scaleOrdinal` for categorical colors. Dropdown menus allow switching which measurements appear on the x- and y-axes.

TThe-World-Muda

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, encoding sepal and petal measurements along the x and y axes with species indicated by color. Users can dynamically change the plotted attributes via dropdown menus. Hovering over a color legend item fades all points of other species, allowing for focused comparison. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and renders points as SVG circles.

JJun Suzuki

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot uses React and D3.js to visualize the Iris dataset, displaying petal length against sepal width. A color legend maps each species to a distinct color, and hovering over a legend entry highlights data points of that species while fading all others to 20% opacity. The visualization employs D3's `scaleLinear` for axes, `scaleOrdinal` for the color mapping, and SVG circles for data marks, with axes generated by custom React components from the provided files.

Xxiaoma1002

95% match

Loading thumbnail…

interactive color legend

This interactive scatter plot of the Iris dataset allows users to explore relationships between sepal and petal measurements using dropdown menus to select variables for the x and y axes. The color legend for species is interactive: hovering over a legend item fades all other points to 20% opacity, highlighting the selected species in SVG circles rendered with React. The visualization uses d3-scale for linear and ordinal scales, d3-format to tick labels, and react-dropdown for the axis selectors, with CSV data fetched from a GitHub gist.

Ssurikmeetr

95% match