Skip to main content
SimilarExport ZIP
100%

Testing dropdown menu

✓ Published0🌍 Public
JJohn Patrick Banas
Last edited Sep 15, 2021
Created on Sep 15, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Testing React Dropdown

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.

AAndrea Picciau
92% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, allowing users to select which measurements appear on the x- and y-axes using two React dropdown menus. The visualization uses React state to manage the selected attributes, and D3 v5 functions like `scaleLinear` and `extent` to compute scales from the CSV data. The SVG rendering includes custom React components for the axes, marks, and dropdowns, with circular points colored in teal that include native tooltips showing formatted values.

Ddumbdataguy@gmail.com
90% match
Loading thumbnail…

Scatterplot V2 w/ menus

This interactive scatterplot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. The chart renders as an SVG using React, with axes generated through custom components and scales from d3-scale. Dropdown menus are implemented with ReactDropdown and d3.csv loads the data. Axis labels update automatically to reflect selected attributes, and each data point includes a native SVG tooltip showing its x-value.

SSophia Cofone
89% match
Loading thumbnail…

Polished Scatter Plot with Menus

A polished scatter plot of the Iris dataset with interactive dropdown menus for selecting the X and Y axes. The visualization uses React to manage state for the selected attributes and d3.scaleLinear to map data values to pixel positions, with custom SVG components for the axes and marks. The ReactDropdown library provides the menu interface, while D3's csv parser loads the data and applies type coercion to numeric fields. The plot features formatted axis ticks and tooltips via SVG title elements.

Rroc286
89% match
Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus control which Iris flower measurements appear on the scatter plot’s x- and y-axes, with labels updating accordingly. Built with React and D3 v5, the visualization loads the classic Iris Dataset via `d3.csv`, maps the numeric fields to linear scales using `scaleLinear` and `extent`, and renders SVG circles for each data point. The `Dropdown` and `Marks` components handle the interactive selection and circle placement, while formatted tick labels and axis titles clarify the currently chosen attributes.

KKwame Porter Robinson
88% match
Loading thumbnail…

Scatter plot with menus

A scatter plot of the Iris Dataset allows users to explore relationships between flower measurements via two dropdown menus for selecting X and Y axes. Points are colored by species, with a legend that dims non-hovered categories. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` for data loading, rendering as SVG with custom axis components and ReactDropdown for the menus.

FFrederick O'Brien
88% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders SVG circles for each data point, with axes generated through custom React components. The code uses `d3.scaleLinear` for scaling, `d3.extent` for domains, and `d3.csv` for loading data, while `ReactDropdown` provides the menu controls.

Ttharuta
88% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered with SVG, where dropdown menus allow the user to select which attribute maps to the x- and y-axes. The visualization uses React with hooks for state management, D3 scales and axes for positioning, and a custom Dropdown component to update the selected attributes. Circles represent each flower, with a tooltip showing the x-axis value.

PPeter Krevenets
88% match