Skip to main content
SimilarExport ZIP
100%

scatterplot with menu and color

✓ Published1🌍 Public
Sseanowh
Last edited Sep 18, 2021
Created on Sep 18, 2021

An interactive scatterplot of the Iris flower dataset visualizes correlations between sepal and petal measurements, with species distinguished by color. The visualization uses React state management in the main `App` component to control dropdown menus for selecting which measurement attributes appear on the x and y axes. D3 v7 utilities like `scaleLinear`, `scaleOrdinal`, and `extent` compute scales for the SVG rendering, while the data loads via the `csv` parser. The dropdown component allows users to switch between four numeric attributes, updating the axes and tick labels dynamically through React's `useState` hook.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

scatterplot with menu

A scatterplot of the Iris flower dataset renders sepal and petal measurements as circles, with dropdown menus above the chart to select which numerical attribute appears on the x- and y-axes. The React app manages the selected attributes in state, and D3’s `scaleLinear`, `extent`, and `nice` compute the axes from the CSV data loaded via `d3.csv`. SVG circles and axis ticks are generated by React components, with hover tooltips supplied by SVG `<title>` elements.

Sseanowh
95% 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
94% match
Loading thumbnail…

Scatter Plot with menu

This interactive scatter plot uses the classic Iris dataset to explore relationships between four flower measurements (sepal length, sepal width, petal length, and petal width). Dropdown menus allow users to select which measurement appears on the x- and y-axes, with the data points colored by species. A color legend on the right highlights points from a single species on mouseover, dimming the others. The visualization is built with React, rendering to SVG, using d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.extent for domain computation, with data loaded via d3.csv.

Iiblub
94% match
Loading thumbnail…

scatterplot with menu and color and legend

An interactive scatterplot of the Iris dataset lets users explore relationships between four numeric flower measurements by selecting which attributes map to the X and Y axes via two dropdown menus. Circles represent individual flowers, colored by species through a categorical ordinal scale, with a legend identifying the three classes and tooltips showing values on hover. The visualization uses React state to manage axis selections and renders SVG marks with D3 scales, including `scaleLinear` for axes and `scaleOrdinal` for colors, while axis ticks are drawn with custom components.

Sseanowh
94% match
Loading thumbnail…

Scatter Plot with Menus, Color Legend

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. Two dropdown menus let viewers switch which quantitative attributes appear on the x and y axes, while a color legend maps each species to a distinct hue. The visualization uses React state management with d3.scaleLinear for axes, d3.scaleOrdinal for colors, and SVG circles rendered via React components. CSV data is loaded asynchronously using d3.csv, with axes and labels drawn from reusable custom React components.

SSai Phaltankar
93% match
Loading thumbnail…

Scatterplot with menus

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute appears on each axis, with options including sepal length, sepal width, petal length, petal width, and species. The visualization uses React to manage state for the selected axes and D3 v5’s `scaleLinear`, `extent`, and `csv` to load and scale the data. SVG circles render each data point with a tooltip, while custom React components draw tick marks, axis labels, and the dropdown controls.

Mmartinbirch@outlook.dk
93% match
Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus. Users select which attribute appears on each axis, and the SVG scatter plot updates the x and y scales accordingly. The visualization uses React hooks for state management, d3.scaleLinear for scaling, and d3.extent for domain calculations. Data is loaded asynchronously from a CSV file using d3.csv, with numeric values parsed on ingestion. The interface includes custom axis components with tick marks and axis labels.

SSam Hege
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