Skip to main content
SimilarExport ZIP
100%

scatter with dropdown

✓ Published1🌍 Public
Mmarianamartins87
Last edited Mar 17, 2021
Created on Mar 17, 2021
Forked from iris

This interactive scatterplot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently choose which attribute to plot on the X and Y axes, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, SVG circles for data points, and `csv` for data loading from a GitHub-hosted dataset. Tooltips display formatted values on hover, while the React `useState` hook manages the selected axis attributes.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot of the Iris Dataset allows users to explore relationships between sepal and petal measurements. Two dropdown menus, built with ReactDropdown, select the attributes for the X and Y axes, with axis labels updating accordingly. The SVG visualization uses D3 scales, extents, and formatting via `scaleLinear`, `extent`, and `format` to render axes and a static set of teal circular marks, each with a tooltip showing the x-value. Data is loaded from a CSV file hosted on GitHub using D3's `csv` function.

BBen Brophy
93% match
Loading thumbnail…

scatter with menus

This interactive scatter plot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. The visualization, rendered with React and D3 v7, uses `scaleLinear` for axes, `scaleOrdinal` for species coloring, and SVG circles for data points. Hovering over the color legend highlights a selected species while dimming others, and tooltips reveal exact values via SVG `<title>` elements.

JJosh Zalcman
93% match
Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attributes appear on the x and y axes, dynamically updating the visualization. Built with React and D3 v5, the example uses `scaleLinear` for scaling, `extent` for domain calculation, and SVG circles for data points. The axes are custom React components that render tick marks and labels, while hover tooltips display formatted values via SVG `<title>` elements.

MMarat
92% match
Loading thumbnail…

Scatter 🅿️lot w/ Ⓜ️enu💰

This scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. Two dropdown menus let users independently select which attribute to display on the X and Y axes from options including sepal and petal dimensions, as well as species. The code uses React for the interface and D3 v5 for the SVG rendering, employing `scaleLinear` for axes, `extent` for domain calculation, and a custom `Dropdown` component to manage the interactive attribute selection.

Tthom
92% match
Loading thumbnail…

Scatter Plot [interactive]

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which attributes appear on the x and y axes, while a color legend enables filtering by species through mouse hover, which fades non-selected data points. The visualization is built with React and D3 v5, using SVG rendering for marks and axes. The data is loaded from a CSV file via d3.csv.

Aadewole-top
92% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, allowing viewers to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis through the dropdown menus. Built with React hooks and D3.js v5, the visualization uses `scaleLinear` to map data ranges to SVG coordinates and renders circles for individual specimens. The axis components dynamically update with `tickFormat` for readable labels, while hover tooltips reveal exact values. The code demonstrates a reusable pattern for building linked interactive visualizations from CSV data using `d3.csv` and React state management.

Ppatasky
92% match
Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus. Users select which attribute appears on each axis, and the SVG scatter plot updates the x and y scales accordingly. The visualization uses React hooks for state management, d3.scaleLinear for scaling, and d3.extent for domain calculations. Data is loaded asynchronously from a CSV file using d3.csv, with numeric values parsed on ingestion. The interface includes custom axis components with tick marks and axis labels.

SSam Hege
92% match
Loading thumbnail…

Scatter Plot With menu

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via React dropdown menus. The SVG visualization uses d3.scaleLinear for both axes, with d3.extent and d3.max for domain calculation, and renders circles with native tooltips. The React components (AxisBottom, AxisLeft, Marks, Dropdown) manage the state-driven re-rendering as users change axis selections, pulling data asynchronously via d3.csv.

Aadewole-top
92% match