Skip to main content
SimilarExport ZIP
100%

Fork of A scatter plot with menus in React and D3

✓ Published0🌍 Public
Bblackbottt
Last edited May 31, 2022
Created on May 31, 2022

This interactive scatter plot visualizes the iris dataset, allowing users to dynamically select which four measurements (sepal length, sepal width, petal length, petal width) to display on the x and y axes via dropdown menus. The visualization renders SVG circles for each data point, using D3’s `scaleLinear` for axis scaling and `extent` to compute the domains. Axis ticks are generated with `xScale.ticks()` and `yScale.ticks()`, while React’s `useState` manages the selected attributes. The React component structure separates concerns into `AxleBottom`, `AxleLeft`, `Marks`, and `Dropdown` components.

AI-generated description

A scatter plot from the iris dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting users switch which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axes generated using custom scale functions and tick components. The code includes interactive dropdown components that trigger state updates, allowing real-time switching between the dataset’s numeric attributes.

BBjoernujjwb
93% match
Loading thumbnail…

Fork of 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, built with React state management, control which attributes appear on the x- and y-axes, while the SVG rendering updates dynamically through React re-renders. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to compute scales and domains, with custom React components for axis rendering and circular marks. Hovering over a point reveals its exact value via a native SVG `<title>` tooltip, and all data loading is handled asynchronously using `csv` from D3.

Nnoriktal
93% match
Loading thumbnail…

Fork of 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 v5, the visualization uses d3.scaleLinear for scales, d3.extent for domain calculation, and d3.csv for data loading. SVG rendering draws the circular marks, while custom React components handle axis generation and menu controls, with d3.format applying abbreviated tick labels.

AAbin
93% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements through React dropdown menus that dynamically change the x- and y-axis variables. The visualization uses React with hooks (useState, useEffect) and D3 v5 scales (scaleLinear, extent) to map data points as SVG circles with tooltips. Axis components and marks are separate React components, while react-dropdown provides the attribute selection menus. The code loads data asynchronously via d3.csv from a GitHub gist.

Jjerryren527
92% match
Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset allows interactive selection of which measurement attributes (sepal length, sepal width, petal length, petal width, or species) appear on the X and Y axes via dropdown menus. The visualization is rendered as an SVG using React, with D3.js v5 functions like `csv` for data loading and `scaleLinear` for axis scales. Two dropdown components update the selected attributes, triggering re-renders of the axes and circles.

NNikithakatta30
92% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus control which attributes map to the x- and y-axes, with the SVG marks updating accordingly. The React component uses `useState` and `useCallback` to manage selections, while `d3.csv` loads the data and `d3.scaleLinear` with `extent` handles scaling. Axes are rendered as custom SVG components, and a native `<title>` element provides tooltips on each circle.

RRoberto
92% match
Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset, presented as a React application using D3 v5 for scales and axes. Two dropdown menus let the user select which of four numeric attributes (sepal length/width, petal length/width) to display on the x and y axes. The SVG rendering uses `scaleLinear`, `extent`, and `csv` from D3 to load and map the data into positioned circles, with axis labels updating dynamically based on menu selections.

Yyassinelfarhi
92% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot allows users to explore the classic Iris Dataset by selecting which measurements to display on the x and y axes. It uses two dropdown menus to toggle between sepal length, sepal width, petal length, petal width, and species, with the axis labels updating accordingly. Built with React and d3 v5, the visualization uses `scaleLinear` to map data values to coordinates and `Marks` to draw the circles, with axes rendered by helper components. The styled SVG output is driven by user selections, enabling on-the-fly comparisons of the dataset's features.

WWalkramis
92% match