Skip to main content
SimilarExport ZIP
100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public
朱朱思嘉
Last edited Jun 7, 2022
Created on Jun 7, 2022

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.

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 flower measurements appear on the x- and y-axes using two dropdown menus built with `ReactDropdown`. The React component structure uses `useState` to manage axis selections and `d3.csv` to load data, while D3’s `scaleLinear`, `extent`, and `max` handle scaling. SVG circles represent individual flowers, with axis labels and ticks generated by custom `AxisBottom` and `AxisLeft` components, rendering the chart entirely in SVG.

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

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements via dropdown menus that control the x and y axes. Built with React, D3 v5’s `scaleLinear` and `extent` manage the axes, while custom SVG `circle` elements render the data points. The `react-dropdown` library provides the menus, and CSV data is fetched and parsed asynchronously via `d3.csv`. Axis labels and tick marks are generated with D3’s scale API, and hover tooltips display values using a custom formatter.

Wwhiteswallow87
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements via dropdown menus that control the x and y axes. Built with React, D3 v5’s `scaleLinear` and `extent` manage the axes, while custom SVG `circle` elements render the data points. The `react-dropdown` library provides the menus, and CSV data is fetched and parsed asynchronously via `d3.csv`. Axis labels and tick marks are generated with D3’s scale API, and hover tooltips display values using a custom formatter.

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

Fork of Polished Scatter Plot with Menus

This example visualizes the Iris Dataset as an interactive scatter plot, allowing users to dynamically select which floral measurements appear on the x- and y-axes via React Dropdown menus. The species of each iris is distinguished by color using a d3.scaleOrdinal with a categorical range. Built with React and D3 v5, the visualization renders circles as SVG marks, with axes generated by custom components that use d3.scaleLinear for positioning and d3.format for tick labels. The data is loaded asynchronously from a CSV URL using d3.csv.

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