Skip to main content
SimilarExport ZIP
100%

Scatter PLot with Menus

✓ Published0🌍 Public
Sserebryanaya.n@gmail.com
Last edited Mar 20, 2023
Created on Mar 10, 2023

This interactive scatter plot displays the classic Iris dataset, with drop-down menus to switch which quantitative attribute is shown on the X axis. Animated transitions move circles to new positions over two seconds, while the radius grows on entry. Built with React and D3, it uses `scaleLinear` for axes, `selectAll` with data joins for rendering, and custom menu and scatter plot modules, rendering as SVG.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to compare any two numerical attributes by selecting them from dropdown menus for the X and Y axes. Each point represents a flower sample, with hover tooltips revealing precise values. Built with React and D3 v5, the visualization uses SVG rendering and scales created via `d3.scaleLinear` and `d3.extent`, with axes generated by custom React components. The menus update the state to re-render the chart dynamically.

MMario Ibarra
94% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically change which attributes are displayed on the x and y axes through two dropdown menus. Built with React managing state and D3 v7 utilities like `scaleLinear` and `extent` for scaling, the SVG rendering includes custom axis components and circles with tooltips. The code uses a custom `useData` hook with the `csv` function to load and parse the dataset, coordinating menu selections with axis labels and data values.

Jjbruzzo
93% match
Loading thumbnail…

Animated Scatter Plot with Menus

This animated scatter plot, built with React and D3, lets users explore the classic Iris dataset by dynamically selecting which columns map to the x- and y-axes via two dropdown menus. The chart supports both quantitative and categorical axes, smoothly transitioning circles to their new positions over one second when the data or axis type changes. On initial load, points grow from radius zero into place, and all axis transitions are animated for a polished, interactive experience.

Ccharlieronchetti@gmail.com
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris Dataset, allowing viewers to explore relationships between different floral measurements by selecting which attributes to plot on the X and Y axes through two dropdown menus. Built with React and D3 v5, it uses the `scaleLinear` API to map data to SVG coordinates, with custom `AxisBottom`, `AxisLeft`, and `Marks` components rendering the axes and circle glyphs. The visualization updates dynamically when menu selections change, and each data point includes a native SVG tooltip showing its value.

Jj-PGi
93% match
Loading thumbnail…

Scatter Plot With Menus v2

This interactive scatter plot displays the Iris dataset, allowing users to select which attribute to map to the x- and y-axes via two dropdown menus. The visualization is built with React and renders SVG circles using D3 scales and axes, with a tooltip on each point showing its value. Data is loaded via D3’s `csv` function, and the selections update the state to re-render the plot with the chosen attributes.

AAndres de la Garza
93% 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
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements. Two dropdown menus independently select the attributes plotted on the x and y axes, with axes and labels updating accordingly. Built with React and D3 v5, it uses `scaleLinear`, `extent`, and `csv` for data loading and scaling. Points are rendered as SVG circles, with tooltips showing formatted values. The interface demonstrates a simple pattern for linking dropdown controls to dynamic axis updates.

CCurran Kelleher
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, featuring dropdown menus that let viewers select which numerical attributes to display on the x and y axes. The visualization renders data points as SVG circles using React components, with axes generated from D3 scales (scaleLinear) and tick formatting via the format function. Users can compare any combination of sepal and petal measurements, with axis labels updating dynamically to reflect the current selection. The chart loads CSV data asynchronously using D3’s csv parser, and menu interactions update state through React’s useState hook.

Vvesnaj
92% match