Fork of Polished Scatter Plot with Menus

100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Oct 31, 2022

Created on Oct 30, 2022

Forked from Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, with menus that let the user select which attributes map to the X and Y axes, dynamically updating the visualization. The plot renders 150 circles as SVG marks, using D3’s `scaleLinear` for axis scaling and `extent` for domain calculation, while React manages state for the chosen attributes. Axis ticks are generated by D3’s scale `ticks` method, and tooltips appear via SVG `<title>` elements. The data is loaded asynchronously with D3’s `csv` function from a GitHub-hosted CSV file.

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 attributes to plot on the x and y axes via dropdown menus. The visualization is rendered as an SVG using React components for axes and data marks. It employs D3's `scaleLinear` for coordinate mapping and `extent` for scale domains, while React's `useState` manages the selected attribute values. The plot updates the axes and a tooltip showing the x-value for each circle, offering a flexible exploration of the dataset's dimensions.

RRupendra Pamisetty

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

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to choose which numerical attributes to plot on the x- and y-axes via dropdown menus powered by react-dropdown. The visualization uses React with hooks (useState, useEffect) to manage state and data loading, while D3 version 5 (scaleLinear, extent, csv) handles scaling, axis generation, and data fetching from a GitHub gist. SVG circles represent individual iris samples, and hover tooltips display formatted x-values using d3.format.

Cchar0496

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

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris dataset rendered as SVG circles in React, with two dropdown menus that let the viewer select which of four numeric attributes appears on the x- and y-axes. The visualization uses d3.scaleLinear for both axes, d3.extent to compute domains, and d3.csv to load the data, while custom React components (AxisBottom, AxisLeft, Marks) generate the tick marks, labels, and circles. Axis labels update dynamically based on the selected attribute.

Bblackbottt

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, with dropdown menus allowing users to select the attributes mapped to the x- and y-axes. The React application uses D3.js scale functions, including `scaleLinear` and `extent`, to compute domains and ranges for the SVG circles representing each iris flower. The D3 `csv` loader asynchronously fetches and parses the dataset from a GitHub gist, while the `react-dropdown` component provides the menu interface, and axis ticks are rendered with D3’s scale methods.

KKunkgg

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

95% match