Attempt menus and colour

100%

Attempt menus and colour

✓ Published0🌍 Public

Last edited Apr 11, 2021

Created on Apr 11, 2021

Forked from Polished Scatter Plot with Menus

This interactive scatter plot explores the Iris dataset, allowing users to dynamically select which flower measurements appear on the x and y axes via React dropdown menus. Hovering over the color legend for species fades unrelated points and highlights the selected group. Built with React and D3 v6, the visualization uses `scaleLinear`, `scaleOrdinal`, `csv`, `extent`, and `format` to render SVG circles and axes, with brush-free interactivity driven by React state hooks.

AI-generated description

A scatter plot showing the Iris dataset and the relationship between Petal Length and Sepal Width (adaptable to any variable) using D3 and React.

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

92% match

Loading thumbnail…

Scatter plot with menus and colors

This interactive scatter plot explores the Iris dataset, displaying species as colored points with selectable X and Y axes. Two dropdown menus, built with react-dropdown, let users choose which flower measurements to compare, while a color legend identifies the three species using d3.scaleOrdinal. The visualization uses React state management and SVG rendering through D3 scales and axes (scaleLinear, AxisBottom, AxisLeft) to redraw the chart whenever the selected attributes change.

MmohitPassan

92% match

Loading thumbnail…

colorised scatter plot with menu

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. Two dropdown menus let viewers select which attribute appears on the x-axis and y-axis, with the plot updating in response to their choices. Points are color-coded by species using a d3.scaleOrdinal function. The visualization uses React for state management and rendering, with D3 v5 (scaleLinear, extent, csv) handling data loading and scales, and SVG circles displaying each data point.

MMATTE-blz

92% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x and y axes via dropdown menus. The plot uses React dropdowns to control the axes, with d3.scaleLinear for positioning and d3.scaleOrdinal for species-based coloring. Hovering over the color legend highlights points of a selected species, using React’s useState to manage the hovered value, while SVG circles render each data point with tooltips.

CCatalina Vajiac

92% match

Loading thumbnail…

Interactive Polished Scatterplots with Menus and Color

This interactive scatterplot explores the Iris dataset, displaying four numeric flower attributes and using color to encode species. Users can select which measurements appear on the x- and y-axes via dropdown menus. The visualization features hover interactions that highlight points of a specific species in the legend. Built with React and D3 (d3.v7), it uses `scaleLinear` and `scaleOrdinal` for axes and color, with SVG rendering and custom components for axes, marks, and a color legend.

Rrmgoldberg24

92% 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

92% match

Loading thumbnail…

Interactive Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements through dropdown menus that switch the X and Y axes. Points are colored by species, with a color legend that fades non-hovered points for focused comparison. Built with React and D3 v7, the visualization uses D3's `scaleLinear` for axes and `scaleOrdinal` for categorical colors, rendering points as SVG circles. The code leverages React state for user selections and D3 utility functions like `csv` to load and parse the data.

Sstephanie0215

91% match

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot displays the Iris dataset, with dropdown menus enabling users to select which flower measurements appear on the x- and y-axes. Each point is colored by species using a D3 ordinal scale, and hovering reveals the sepal length via SVG circle titles. Built with React hooks for state management, the visualization uses D3 scales and the `csv` loader to parse data, while custom React components render the axes and marks.

MMario Ibarra

91% match