scatterplot with menu and color and legend

100%

scatterplot with menu and color and legend

✓ Published1🌍 Public

Last edited Sep 18, 2021

Created on Sep 18, 2021

Forked from scatterplot with menu and color

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.

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…

interactive scatterplot with menu and color and legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which measurements to display on the x and y axes via dropdown menus. The plot uses color encoding to distinguish the three Iris species, with a legend that filters and fades points on hover. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering with custom axis and legend components.

Sseanowh

96% match

Loading thumbnail…

Scatter Plot with Menu and Colors

An interactive scatter plot of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the X and Y axes via React dropdown menus. The visualization uses D3’s `scaleLinear` for axes and `scaleOrdinal` for categorical species colors, with React rendering SVG circles for each data point. Tooltips show formatted axis values on hover, and axis labels update based on the selected attributes. Data is loaded asynchronously with D3’s `csv` and parsed into numeric values.

AAdriana Rodriguez Sanabria

95% match

Loading thumbnail…

Scatter Plot with Menus and Legend

This interactive scatter plot lets users explore the Iris dataset by selecting which flower measurements to plot on the x and y axes via dropdown menus. The visualization renders 150 data points as colored circles, with each species distinguished by a categorical color scale and accompanying legend. Built with React and D3 v5, the chart uses `scaleLinear`, `scaleOrdinal`, and CSV-loaded data, while axis components are rendered as SVG elements generated through the `AxisBottom` and `AxisLeft` functions.

Ppnlinyz

94% match

Loading thumbnail…

Scatter plot with menus

This scatter plot of the Iris dataset displays the relationships between flower measurements, with interactive dropdown menus to select the attributes for the x and y axes. The chart shows all data points colored by species, and hovering over the color legend highlights a single species while fading the others. Built with React and D3, the visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent` for scales and domains, while custom React components render SVG axes, circles, and the legend.

TTakuya Kitazawa

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

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric flower measurements and species through interactive dropdown menus that control which attributes appear on the x and y axes. The visualization uses React to manage state for selected attributes, while D3.js handles the linear scales, axis generation, and data loading via `csv`. The SVG rendering displays circles colored teal, with axis labels updating dynamically based on menu selections.

Wwindwaver

94% match

Loading thumbnail…

scatterplot with menu and color

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.

Sseanowh

94% match

Loading thumbnail…

Scatter Plot with Menus with color scale and legend

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x and y axes via two dropdown menus. Each point is colored by species, with an accompanying color legend. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and React state to update the chart based on menu selections. Data is loaded asynchronously with `csv` from a GitHub URL and rendered as SVG circles.

Rrajamrit-singh

93% match