Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited May 7, 2023

Created on May 7, 2023

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset allows interactive selection of which measurement attributes (sepal length, sepal width, petal length, petal width, or species) appear on the X and Y axes via dropdown menus. The visualization is rendered as an SVG using React, with D3.js v5 functions like `csv` for data loading and `scaleLinear` for axis scales. Two dropdown components update the selected attributes, triggering re-renders of the axes and circles.

NNikithakatta30

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

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

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

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

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 visualizes the Iris dataset, letting users switch which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axes generated using custom scale functions and tick components. The code includes interactive dropdown components that trigger state updates, allowing real-time switching between the dataset’s numeric attributes.

BBjoernujjwb

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot allows users to explore the classic Iris Dataset by selecting which measurements to display on the x and y axes. It uses two dropdown menus to toggle between sepal length, sepal width, petal length, petal width, and species, with the axis labels updating accordingly. Built with React and d3 v5, the visualization uses `scaleLinear` to map data values to coordinates and `Marks` to draw the circles, with axes rendered by helper components. The styled SVG output is driven by user selections, enabling on-the-fly comparisons of the dataset's features.

WWalkramis

96% match