Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Oct 26, 2022

Created on Oct 26, 2022

A scatter plot of the Iris dataset rendered with SVG in React, displaying sepal and petal measurements as points. The visualization uses d3.scaleLinear for both axes and d3.extent to compute domains, with React state managing selection of the x and y attributes. Two react-dropdown menus let users swap any of the four numeric flower measurements on each axis. The data loads asynchronously via d3.csv, and the axes are drawn with custom React components that generate SVG ticks, lines, and text labels.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, implemented with React state, dynamically select which numerical attributes map to the x and y axes. The visualization renders as an SVG using React with D3’s `scaleLinear` for axis scales and `extent` to compute domains from the CSV data. Circle marks use a tooltip via the `<title>` element.

Eevers-codeshop-ai

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

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

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

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on each axis via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` from d3 for axis scaling, `extent` for domain computation, and `csv` for data loading. SVG circles represent individual iris samples, with D3 tick marks and labels rendered as React components, and each point includes a tooltip showing its x-axis value.

Lleonine2017

95% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, plotted with D3 scales and rendered as SVG circles via React components. Two dropdown menus, built with React state, let users select which of the four flower measurements (sepal length/width, petal length/width) to map to the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and custom React components for axes and marks, with native SVG `<title>` elements for hover tooltips.

LLisa Wagner

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

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