Skip to main content
SimilarExport ZIP
100%

Scatter Plot - React/D3 (Part 35) - Interactive Color Legend

✓ Published0🌍 Public
TTom-S82
Last edited Oct 5, 2020
Created on Oct 5, 2020

This interactive scatter plot displays the Iris dataset, using drop-down menus to select which measurements appear on each axis and color-coding points by species. An interactive color legend highlights points of a selected species while dimming others on mouse hover. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG rendering with radial gradients for point fills. The legend and dropdowns respond to hover and change events, providing a focused exploration of species distributions across four flower attributes.

AI-generated description

A program that creates a scatter plot based on the UCI's Iris Dataset.

Extras:

  • The species of plants are drawn in different colors to show how they are roughly distributed
  • A few basic hover effects over the dropdowns and the legend

Potential Improvements for later:

Tutorials:

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes the Iris dataset, showing relationships between four flower measurements with the x and y axes controlled by dropdown menus. The color legend is interactive: hovering over a species option fades non-matching points to 20% opacity while keeping the selected species fully visible. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and inline SVG circles for data points. Dropdown components from react-dropdown handle attribute selection for both axes.

MMichael Bruno
94% match
Loading thumbnail…

Scatter plot with interactive color legend

This interactive scatter plot visualizes the Iris dataset, showing relationships between flower measurements selected via dropdown menus. A color legend on the right highlights points by species, dimming all other data when a species is hovered. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles with tooltips. The dataset is loaded as CSV and parsed into numeric values for plotting.

AAlex Stulov
93% match
Loading thumbnail…

Interactive Color Legend, ScatterPlot (codeAlong)

This interactive scatterplot displays the Iris flower dataset, plotting sepal and petal measurements selected via dropdown menus. The visualization uses d3.scaleOrdinal to map species to colors and includes a color legend that filters points with mouse hover, dimming non-matching species. Built with React and d3.v6, it renders SVG marks and axes, with the legend responding to hover events to highlight specific species groups.

Ttomahawk-jupiter
93% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying measurements like petal length and sepal width as colored points. Users can explore the data by selecting different attributes from dropdown menus to change the x and y axes, while hovering over the color legend highlights points of a selected species and fades the rest. Built with React and D3 v5, the visualization uses scales and SVG rendering to create the chart, with React state managing attribute selections and hover interactions.

Ee-ines
92% match
Loading thumbnail…

Scatter Plot with Interactive Legend

This scatter plot visualizes the Iris dataset, letting users select which flower measurements appear on the x- and y-axes via dropdown menus. An interactive color legend highlights individual species on hover by fading non-matching points, using React state to manage selection. The chart is rendered with SVG elements, with scales and axes built using d3.scaleLinear and custom React components for the legends and marks.

SSam Hege
92% match
Loading thumbnail…

Interactive Color Legends

This interactive scatter plot of the Iris dataset allows users to explore relationships between flower measurements by selecting different attributes for the x and y axes via dropdown menus. Hovering over the color legend highlights points of a selected species while fading others, with an opacity transition applied to non-hovered marks. The visualization is built with React, d3.scaleLinear and d3.scaleOrdinal for scales, and renders SVG circles with tooltips. The data is loaded as CSV and parsed using d3.csv.

Tthomasjungcoe
92% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare different flower measurements by selecting X and Y axes from dropdown menus. The chart displays all data points as colored circles representing species, with an interactive color legend that highlights a selected species while fading others. The visualization is built with React and D3 utilities including scaleLinear and scaleOrdinal, rendered as SVG. Hovering over legend items filters the data, making it easy to explore relationships between sepal and petal dimensions across the three iris species.

LLaura Johnson
91% match
Loading thumbnail…

Scatterplot with Interactive Color Legend

This scatterplot displays the Iris flower dataset, plotting sepal and petal measurements and coloring points by species. Interactive dropdowns let viewers change which measurement is mapped to the x- and y-axes. The color legend responds to mouse hover, fading non-hovered species to 30% opacity while highlighting the selected group. Built with React and D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` for categories, and SVG circles for rendering.

ZZoe Ferencova
91% match