Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Lleonine2017

Last edited Sep 19, 2021

Created on Sep 19, 2021

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.

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 visualizes the Iris dataset, allowing users to select which measurements (sepal length, sepal width, petal length, petal width, species) appear on the x- and y-axes via dropdown menus. The visualization is rendered as SVG using React, with D3.js (d3.v5) handling data loading via `csv`, linear scaling via `scaleLinear`, and axis tick generation. Each data point is drawn as a circle whose position and hover tooltip are determined by the selected attributes.

NNikithakatta30

97% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing viewers to explore relationships between sepal and petal measurements by swapping attributes on the x- and y-axes via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` for axes, `csv` for data loading, and SVG circles rendered through React components for marks. At any moment, the graph displays one combination of the four numeric attributes, with axis labels updating dynamically to reflect the selected measures.

Mmartinbirch@outlook.dk

97% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying sepal and petal measurements as a series of circles. Two dropdown menus allow the user to independently select which quantitative or categorical attribute is plotted on the x- and y-axes. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` to map data to SVG coordinates, while axis components and marks are rendered as reusable React functions. Data loading is handled asynchronously with `d3.csv`, and the chart updates dynamically when menu selections change.

Sshimos12468

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the Iris dataset, allowing users to select any of four measurements—sepal length/width and petal length/width—for both the X and Y axes via dropdown menus, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses `scaleLinear` and `extent` to compute scales, then renders circles via SVG marks with tooltips. The code relies on the `useData` hook to asynchronously load the CSV from Curran’s Gist, and custom `AxisBottom`/`AxisLeft` components generate ticks.

AAnnie Ulichney

96% 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 by selecting which attributes are plotted on the x- and y-axes via dropdown menus. The chart renders data points as SVG circles with tooltips, using D3’s `scaleLinear`, `extent`, and `format` APIs for axes and tick labels. The visualization is built with React, managing state for axis selections, and a custom `useData` hook loads the CSV data using `d3.csv`.

GGeekboxer

96% match

Loading thumbnail…

Fork of 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. The visualization is built with React and rendered as SVG, using D3 v5 scale functions like `scaleLinear` and `extent` for scaling and axis generation. Data is loaded asynchronously with `d3.csv` from a GitHub-hosted CSV file. Each point represents an iris specimen, with native SVG `<title>` elements providing hover tooltips that display precise values.

Cchar0496

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

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot, built with React and D3.js v5, visualizes the classic Iris Dataset, which contains measurements of sepal and petal dimensions for three iris species. Two dropdown menus allow users to independently select which quantitative attribute is mapped to the x-axis and y-axis, dynamically updating the linear scales and the displayed points. The visualization renders as an SVG, with each data point drawn as a circle. The code uses `d3.csv` to load the data and `d3.scaleLinear` to generate the axes, with React's `useState` managing the selected attributes.

SSam

96% match