Skip to main content
SimilarExport ZIP
100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public
DDonald Bagwell
Last edited Dec 20, 2023
Created on Dec 20, 2023

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.

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 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
97% 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
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This example shows interactive scatter plots of the Iris dataset, allowing users to choose which floral measurements appear on the x- and y-axes via ReactDropdown menus. The visualization renders points as SVG circles using React components, with axes generated from d3.scaleLinear and d3.extent. Data is loaded asynchronously with d3.csv and parsed into numeric values. Axis ticks and labels are styled using CSS, and hover tooltips display formatted values via SVG title elements.

RRamashish Pandey
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 interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions. Users can dynamically switch between four quantitative attributes for both the X and Y axes using ReactDropdown menus, while color encodes species via d3.scaleOrdinal. The visualization is built with React and d3.v5, rendering SVG circles and axes through custom components, with data loaded asynchronously using d3.csv.

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