Fork of Polished Scatter Plot with Menus

100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public

Last edited May 7, 2024

Created on May 7, 2024

Forked from 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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

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 measurements to plot on the x and y axes via dropdown menus. The visualization updates the axes and data points in real time based on user selections. Built with React and D3.js (v5), it uses D3’s scaleLinear function for value mapping, extent for domain calculation, and custom SVG components for rendering axes and circular marks. The iris data is loaded asynchronously via the d3.csv function, with all numeric attributes parsed for plot generation.

YYedrup

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 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.

朱朱思嘉

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, featuring dropdown menus to select which measured attribute appears on the x- and y-axes. The visualization updates the axes and data points in response to user selections, with tooltips showing the x-value for each circle. Built with React and D3 v5, the code uses `scaleLinear` for axes, `csv` for data loading, and `ReactDropdown` for the menu controls. The SVG rendering separates axis and mark components, employing D3’s `extent` and `max` for domain calculations.

HHenry-Bayly

96% 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

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris dataset allows users to explore relationships between measurements by selecting the x and y attributes from dropdown menus. Built with React and D3 v5, the visualization renders SVG circles for each sample, with axes and labels updating dynamically based on user selections. The code uses `scaleLinear` for scaling, `extent` for domain calculation, and `csv` for data loading. Two `ReactDropdown` menus control which numerical attributes—sepal length, width, and petal length or width—are plotted, with the selected values reflected in the axis labels.

YYu Lun Hsu

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which measurements to plot on the x and y axes via two dropdown menus. Built with D3 v5 and React, it renders SVG circles, with axes, labels, and a tooltip generated through custom components. The code uses D3’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, and the `react-dropdown-browser` library for the menus.

DDasbach.EJ

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This example visualizes the Iris Dataset as an interactive scatter plot, allowing users to dynamically select which floral measurements appear on the x- and y-axes via React Dropdown menus. The species of each iris is distinguished by color using a d3.scaleOrdinal with a categorical range. Built with React and D3 v5, the visualization renders circles as SVG marks, with axes generated by custom components that use d3.scaleLinear for positioning and d3.format for tick labels. The data is loaded asynchronously from a CSV URL using d3.csv.

SSam

96% match