Fork of Polished Scatter Plot with Menus

100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

Forked from Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes using two dropdown menus built with `ReactDropdown`. The React component structure uses `useState` to manage axis selections and `d3.csv` to load data, while D3’s `scaleLinear`, `extent`, and `max` handle scaling. SVG circles represent individual flowers, with axis labels and ticks generated by custom `AxisBottom` and `AxisLeft` components, rendering the chart entirely in SVG.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements to display on the x- and y-axes via dropdown menus. Built with React and rendered as SVG, the chart plots species data points using `d3.scaleLinear` for scales and `d3.extent` for domains. The two dropdowns, implemented with `react-dropdown`, update the plot through React state, while `d3.csv` asynchronously loads the data. Axis components and marks are created using D3’s tick generation and SVG circle elements.

朱朱思嘉

97% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x and y axes via dropdown menus built with ReactDropdown. The React application uses D3’s `scaleLinear`, `extent`, and `csv` loading to position circles in an SVG, with separate reusable components for axes and marks. Each circle exposes a native SVG `<title>` tooltip showing its x-axis value, while D3’s `format` applies compact tick labels.

Hhenry c

97% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset displays measurements like sepal length and petal width, letting users change which attribute appears on each axis via ReactDropdown menus. The visualization uses React for component structure and SVG for rendering, with d3.scaleLinear for axes and d3.csv for data loading. Circles represent individual flowers, and hovering reveals the numeric value through a native SVG title tooltip.

JJaya Durga V

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying flower measurements as circles positioned by two user-selectable numeric attributes. Dropdown menus control which measurements appear on the x and y axes, with axis labels updating dynamically to reflect the current selection. The visualization is built with React and d3 v5, using d3.scaleLinear for coordinate mapping, d3.extent for domain calculation, and d3.csv for data loading. Custom React components generate the SVG axes and marks, while react-dropdown provides the menu interface.

Pprint("Ayush")

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset, rendered as SVG in a React app, lets users explore relationships between four numeric flower measurements. Two dropdown menus, built with ReactDropdown, control which attributes map to the x- and y-axes. The visualization uses D3 v5 scales and extent functions to compute domains, and custom React components render the axes and circular marks. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file.

DDonald Bagwell

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, encoding each observation as a colored circle based on its species. Dropdown menus allow viewers to switch which flower measurements appear on the x- and y-axes. The React component uses `useState` to manage axis selections, while D3 v5 functions like `scaleLinear`, `scaleOrdinal`, and `extent` handle scaling and domains. Axes are drawn as SVG elements in separate `AxisBottom` and `AxisLeft` components, and `Marks` renders the circles with tooltips, all styled with a Poppins font.

Rravencyan

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris Dataset explores relationships between four numeric flower measurements and species. Two dropdown menus, built with the React Dropdown library, allow users to select which attribute is plotted on the x-axis and y-axis. The visualization uses D3 scales and SVG circles for marks, with axes rendered as reusable React components. The data is loaded asynchronously via `d3.csv` and typed using a custom row conversion function.

Vvidhyanamini

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris dataset with two dropdown menus for selecting which flower measurements to compare on the x and y axes, showing sepal and petal length and width. The visualization uses D3 v5 scales and axes to map the selected attributes, while React manages the interactive state and renders the plot as SVG circles. Data is loaded via `d3.csv` from a gist, and the React Dropdown component handles the menu selections.

KKonJoDot

95% match