Scatterplot v5 w/ React (menus, color, interactivity (hover & fade)

100%

Scatterplot v5 w/ React (menus, color, interactivity (hover & fade)

✓ Published0🌍 Public

Last edited Jun 29, 2022

Created on May 24, 2022

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that change the x and y axes. Hovering over a species in the color legend fades out points from other species, highlighting the selected category. Built with React and D3 v5, the SVG visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.csv for data loading, with custom React components for axes, marks, and interactive filtering.

AI-generated description

A scatter plot of The Iris Dataset.

With menus, lables that update automatically, and color legend. data disappears unless you hover over something.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot v4 w/ React (menus, color)

This interactive scatterplot visualizes the Iris dataset through a React interface that builds an SVG chart using D3 v5 scales. Users control the X and Y axes via dropdown menus, with axis labels updating automatically based on selection. A color legend maps the three flower species to distinct circle colors, while tooltips reveal values on hover. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and the `extent` function to generate proportional positioning and categorical color mapping.

SSophia Cofone

94% match

Loading thumbnail…

Scatter Plot w/ menu

This interactive scatter plot uses React and D3 to visualize the Iris flower dataset. Users explore relationships between sepal and petal measurements by selecting attributes for the x and y axes from dropdown menus. The plot encodes species using color, and hovering over the color legend highlights points of that species while fading others. The SVG visualization builds axes with D3 scales, formats tick labels with `d3.format`, and links the dataset via a custom React hook.

CCarlos Caballero

93% match

Loading thumbnail…

Scatter plot with menu and colors

This interactive scatter plot visualizes the Iris dataset, showcasing measurements of sepal and petal dimensions. Users can dynamically select which attributes to display on the X and Y axes via dropdown menus. Hovering over the color legend highlights a specific species, fading the remaining data points to emphasize the selected group. Built with React and D3 v5, the visualization renders as an SVG and uses `scaleLinear` for axis scaling and `scaleOrdinal` for categorical coloring.

Ppatasky

93% match

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus switch which numeric attribute appears on the x- and y-axes, while a categorical color scale distinguishes the three iris species. Powered by React and D3 v5, the SVG visualization uses `scaleLinear`, `scaleOrdinal`, and `csv` to load and render data from a GitHub gist, with axis and mark components built from reusable React functions.

Ccynichole

93% match

Loading thumbnail…

React Scatter Plot w/ Menus, Color & Interactive Color Legend

This interactive React scatter plot visualizes the Iris dataset, letting users select which sepal or petal measurements appear on the X and Y axes via dropdown menus. Each mark is colored by species, and hovering over the color legend highlights matching points while dimming others. Built with d3.v5 scales (scaleLinear, scaleOrdinal) and SVG rendering, it uses React hooks for state management and ReactDropdown for the menus. Data loads asynchronously via d3.csv into a custom useData hook.

Hhunsingeruk@gmail.com

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

93% match

Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot visualizes the Iris dataset, allowing users to switch between different sepal and petal measurements on the x and y axes using two dropdown menus. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and SVG circles rendered via React components. Hovering over a species in the color legend fades non-matching points using React state, while the MarksWithFade component manages mouse events to provide interactive feedback.

Llaurajchang

93% match

Loading thumbnail…

Scatter Plot with Colors and Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, while the chart updates dynamically using React state management. The visualization is built with D3 v7 for scales, axes, and SVG rendering, and React for component structure and user interaction. Data is loaded asynchronously via D3's `csv` utility, and tooltips display values on hover.

Jjbruzzo

93% match