Testing React Dropdown

100%

Testing React Dropdown

✓ Published0🌍 Public

Last edited Dec 1, 2021

Created on Dec 1, 2021

This interactive scatter plot displays the Iris dataset, allowing users to select which floral measurements appear on the X and Y axes via dropdown menus. The visualization uses D3 scales for positioning and color encoding, rendered as SVG circles through React components. A color legend highlights individual species on hover by fading other data points, filtering the underlying display. The example demonstrates combining a React interface with D3's `scaleLinear` and `scaleOrdinal` for interactive exploration.

AI-generated description

A Scatter Plot of the Iris dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Testing dropdown menu

A scatter plot of the Iris dataset rendered in SVG allows interactive selection of the x and y axes through two dropdown menus built with the ReactDropdown component. The visualization uses React state to update the attribute mapping, with d3.scaleLinear and extent functions handling the scales. The readme links to an associated tutorial video.

JJohn Patrick Banas

92% match

Loading thumbnail…

Attempt menus and colour

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.

HHollyClarke19

91% match

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

91% match

Loading thumbnail…

polished scatter menus

This interactive scatter plot of the Iris dataset lets users dynamically select which flower measurements appear on the x and y axes using React Dropdown menus. The visualization updates the axes and points accordingly, with circles colored by species via a d3.scaleOrdinal scale. Built with React and D3 v5, it renders an SVG chart featuring d3.scaleLinear axes, axis tick components, and tooltips displaying formatted values, loading data from a CSV file.

Mmarianamartins87

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

91% match

Loading thumbnail…

Interactive scatter colored plot with menu

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements such as petal and sepal length and width. Users can change which attribute appears on each axis using two dropdown menus built with react-dropdown. The visualization is rendered as SVG using React components for the axes and marks, while d3.v5 utilities like `scaleLinear` and `extent` compute the scales and domains. Dropdown selections update the plotted data dynamically through React state, with axes labeled according to the selected attributes.

JJulien Tremblay

91% match

Loading thumbnail…

ScatterWithDropdowns

This interactive scatterplot displays the classic Iris dataset, allowing users to choose which flower measurements appear on the x- and y-axes via two dropdown menus. A legend color-codes points by species, and hovering over a legend entry filters the displayed points. The visualization is built with React and D3 v5, using D3's `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while `csv` loads the data. Rendering is done as an SVG, with custom `AxisBottom`, `AxisLeft`, `Marks`, and `Dropdown` components.

EEd Hutchinson

90% match

Loading thumbnail…

polished scatter plot with menu

This interactive scatter plot displays the Iris dataset, with dropdown menus controlling which flower measurements appear on the x- and y-axes. The visualization uses React and D3 v5, rendering SVG circles colored teal against a white background. The axis components generate tick marks and labels using scaleLinear and d3.ticks, while the ReactDropdown component manages the selection of attributes like sepal length and petal width. Hovering over any circle reveals its value via an SVG title tooltip, and the layout includes custom axis labels with a fixed margin structure.

MMATTE-blz

90% match