Skip to main content
SimilarExport ZIP
100%

dropdown play

✓ Published1🌍 Public
Aafcchilders
Last edited Nov 28, 2022
Created on Nov 15, 2022

This visualization displays the Iris dataset, allowing users to dynamically select the X and Y attributes from dropdown menus. The interface presents two SVG panels: one showing static circles and the other empty, with a button that removes elements from the second panel when clicked. The code loads data using d3.csv, structures attribute types programmatically, and utilizes React with the react-dropdown component. Both SVG containers are rendered with React elements, and D3 v7 handles data processing while CSS styling applies to the marks.

AI-generated description

A program that loads in some data about CSS colors

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
86% match
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
85% match
Loading thumbnail…

React-dropdown Menus ScatterPlot (codeAlong)

This interactive scatter plot displays the Iris dataset, with dropdown menus on top that control which flower measurements (sepal length, sepal width, petal length, or petal width) appear on the X and Y axes. The visualization uses React hooks like useState to manage selected attributes and d3.scaleLinear to map data ranges to SVG coordinates for the scatterplot marks. The react-dropdown library provides the styled selection menus, while specialized React components (AxisBottom, AxisLeft, and Marks) render the axes and circles.

Ttomahawk-jupiter
82% 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
81% match
Loading thumbnail…

dv2020-ep32-viz33 - scatter plot w/ menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between four measured attributes. The visualization uses dropdown menus to select which attributes are plotted on the x and y axes, with the chart updating dynamically. Built with React and D3 v5, the SVG rendering uses `scaleLinear` for axes and circle marks with tooltips. The data is loaded from a CSV file, and the menus are implemented using the `react-dropdown` library.

Zzach b.
81% 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
81% match
Loading thumbnail…

Stylized Scatterplot with menu

This interactive scatterplot displays the classic Iris flower dataset, allowing viewers to dynamically select which quantitative attributes appear on the X and Y axes through two dropdown menus. Each circle represents an individual iris flower, positioned according to the chosen variables, with tooltips revealing the precise X-axis value upon hover. Built with React and D3 v5, the visualization uses D3 scales and SVG rendering for the plot, passing data through custom components like `Marks` and `AxisBottom`. The dropdowns use `react-dropdown`, and the data is loaded asynchronously from a CSV file via D3’s `csv` parser.

MMark Lam
81% match
Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot from the Iris Dataset uses ReactDropdown to let users select which sepal or petal attributes to plot on each axis. The visualization renders circles colored by iris species using D3 v5 scales, axes, and SVG shapes. Dropdown menus position absolutely over the chart, while a reusable dropdown function updates selections and triggers re-renders, adjusting the axis scales, labels, and point positions accordingly.

Rrohinikotha
81% match