Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus (x & y)

✓ Published1🌍 Public
BbeauMarko
Last edited Jan 29, 2021
Created on Jan 29, 2021

This interactive scatter plot displays the Iris flower dataset, showing the relationship between four measured attributes (sepal length/width, petal length/width) as adjustable X and Y axes. Two dropdown menus in React let users select which attribute appears on each axis, dynamically updating the visualization. The code uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, and renders axes and circle marks as SVG elements. Hovering over a circle reveals its exact value via a native title tooltip.

AI-generated description

A program that loads in saome data using d3 utilities and uses React to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that control which attributes appear on the x and y axes. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.extent to compute domains, and d3.csv to load data. SVG circles represent individual flowers, with tooltips showing exact values. The interface includes labeled axes that update dynamically, styled with custom CSS and the Poppins font.

SSabin Bhandari
96% match
Loading thumbnail…

Scatterplot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across different species. Two dropdown menus let viewers independently select which attribute appears on the X and Y axes, with axis labels updating dynamically to reflect the chosen dimensions. The visualization is built with React and renders SVG circles using d3.scaleLinear for coordinate mapping, while d3.extent and d3.csv handle data scaling and loading from a remote CSV file. Tooltips display formatted attribute values on hover.

JJun Suzuki
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against each other. Two dropdown menus allow users to select which measurement attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses React for component state and rendering, with d3-scale (scaleLinear) for positioning and d3.extent to compute domains. SVG circles represent data points with hover tooltips, while custom React components (AxisBottom, AxisLeft, and Dropdown) handle axes and menu interactions. Data loads asynchronously via d3.csv from a GitHub-hosted CSV file.

Llaplantalaplanta
95% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric attributes—sepal length, sepal width, petal length, and petal width—by selecting any two for the X and Y axes via dropdown menus. Built with React and D3 v6, the visualization renders SVG circles with tooltips showing exact values during hover. The code uses `scaleLinear` for axes, `extent` to compute domains, and custom React components for axes and dropdowns. Axis labels update dynamically to reflect the selected attributes, making the plot adaptable for comparing different feature pairs.

SSonja Ek
95% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus select which attributes appear on the x and y axes, with options for all four numeric measurements and species. The visualization uses React hooks for state management, d3.scaleLinear for axis scaling, and d3.csv for data loading. Points are rendered as SVG circles with native tooltips showing the x-axis value.

MMinh Luong
95% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with axes and labels updating dynamically. Built with React and D3 v7, the visualization uses `scaleLinear` for coordinate mapping and renders data points as SVG circles. The data is loaded via D3's `csv` parser, and reusable axis and mark components keep the code modular.

ZZoe Ferencova
95% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements via dropdown menus. The chart displays data points as circles, with the x-axis and y-axis representing selected attributes like petal length or sepal width. Built with React and D3 utilities, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Users switch attributes through React state management, triggering real-time updates to the axes and marks rendered as SVG circles with tooltips.

LLaura Johnson
95% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting measurements like sepal length and width against each other. Two dropdown menus let users select which quantitative attributes appear on the x- and y-axes, with the axes labels updating accordingly. The visualization is built with React and D3 v5, using scaleLinear for both axes and SVG circles for each data point, with axis components rendered as reusable React functions. The dataset is loaded as CSV from a GitHub gist using d3.csv, and the ReactDropdown component provides the menu interface.

Bbsolomon103
95% match