Skip to main content
SimilarExport ZIP
100%

scatter plot with menus

✓ Published1🌍 Public
MMohammed Banani | MbDev
Last edited May 10, 2022
Created on May 10, 2022

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between four measurements (sepal length/width and petal length/width). Two dropdown menus, built with React's useState hook and a custom Dropdown component, dynamically select which attributes map to the x-axis and y-axis. The visualization uses d3.scaleLinear for scales and d3.extent for domain calculation, rendering SVG circles with native `<title>` tooltips. Axes are generated manually through d3 scale ticks, with data loaded asynchronously via d3.csv.

AI-generated description

scatter plot with react and d3

[Data (https://gist.github.com/curran/a08a1080b88344b0c8a7).

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four numeric measurements—sepal length, sepal width, petal length, and petal width—by selecting which attribute appears on each axis via two dropdown menus. The visualization renders data points as SVG circles, with scales created using d3.scaleLinear and extents computed via d3.extent. Axis components generate tick marks and labels, while React hooks manage the selected attributes and trigger re-renders upon menu changes. The data loads asynchronously from a CSV file using d3.csv.

KKolezhannochka
96% 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 through two dropdown menus that select which attributes appear on the x and y axes. The visualization uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, while React manages component state and re-rendering when menu selections change. The data is loaded asynchronously via D3’s `csv` method, and circles represent individual flowers with tooltips showing the x-axis value.

MmohitPassan
96% 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 across flower species. Two dropdown menus dynamically control which quantitative attribute is displayed on the x- and y-axes, with axes, labels, and data points updating in real time. Built with React and D3 v5, the visualization renders as SVG, using d3.scaleLinear for axis scaling and d3.extent for data domains. Hovering over any circle reveals its exact value via SVG titles.

Nn.koldovsky@gmail.com
96% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between four flower measurements. Two dropdown menus let users select which attribute is mapped to the x-axis and y-axis, dynamically updating the plotted circles and axis labels. The visualization is built with React and rendered as SVG, using D3 v5 utilities like `scaleLinear` for axes and `csv()` for data loading. Hovering over a point reveals its x-value via an SVG `<title>` tooltip.

AAndrea Picciau
96% 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
96% match
Loading thumbnail…

Scatterplot with menus

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute appears on each axis, with options including sepal length, sepal width, petal length, petal width, and species. The visualization uses React to manage state for the selected axes and D3 v5’s `scaleLinear`, `extent`, and `csv` to load and scale the data. SVG circles render each data point with a tooltip, while custom React components draw tick marks, axis labels, and the dropdown controls.

Mmartinbirch@outlook.dk
96% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores the Iris dataset, plotting measurements like petal and sepal length and width as adjustable axes. Two dropdown menus let a user select which quantitative attribute drives the x- and y-axes, with axes labels updating accordingly. Built in React (v17) with d3.v7, it uses `scaleLinear`, `extent`, and reusable SVG axis and circle mark components. The axes and points render as SVG, formatted with a custom tick format that abbreviates large numbers.

AAlex Stulov
96% 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
96% match