Fork of Scatter Plot with Menus and Colour and Legend

100%

Fork of Scatter Plot with Menus and Colour and Legend

✓ Published1🌍 Public

Last edited Mar 11, 2023

Created on Mar 11, 2023

Forked from Scatter Plot with Menus and Colour

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four flower measurements by switching the X and Y axes via dropdown menus. Each point is colored by species, with a legend clarifying the color encoding. The visualization is built with React functional components and renders SVG marks using D3 v5 scales. It leverages `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and React state hooks to manage attribute selections.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus and Colour

This scatter plot of the Iris dataset uses interactive dropdown menus to explore relationships between measurements. Users can select different attributes for the X and Y axes, and the visualization color-codes each point by species using a D3 ordinal scale. Built with React and rendered as SVG, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for the dropdowns and marks. The plot includes axis labels and tick formatting via `format('.2s')`, with tooltips showing the x-value on hover.

NNikita Toropov

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This visualization displays the classic Iris dataset, where users can select which flower measurements to plot on the x and y axes via dropdown menus. It uses React with D3 v5’s `scaleLinear` for axes and `scaleOrdinal` for coloring the data points by species. The scatter plot encodes flower species through color, with a legend on the right, and the axes are rendered as SVG elements using custom `AxisBottom` and `AxisLeft` components.

Aa1153724

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric attributes through dropdown menus that dynamically reassign the x and y axes. The visualization uses React for component management and state, d3.v5 for scales and CSV parsing, and renders SVG circles with tooltips showing formatted values. Users can switch between sepal and petal measurements, with axis labels updating accordingly to reflect the selected variables.

EEugenio2192

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between four measured attributes and species through dropdown menus that dynamically reassign the x- and y-axes. Built with React and rendered as SVG using D3 v5, the visualization updates scales and marks via state changes triggered by the dropdown selections. The code leverages `scaleLinear`, `extent`, and `csv` for data loading and scaling, with custom React components for axes, marks, and menu controls.

XXiaoyu Su

94% match

Loading thumbnail…

Fork of Scatter Plot with Color, Legend and Menus

This interactive scatter plot visualizes the Iris Dataset with drop-down menus for selecting which attributes to display on the X and Y axes. The chart uses React with react-dropdown for the menu controls, D3.js version 6 for scales, axes, and color encoding by species, and SVG rendering. Users can switch between sepal and petal measurements through inline React components, with the visualization updating dynamically via React state management.

SSonja Ek

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset allows users to select which flower attributes appear on the X and Y axes via two dropdown menus. Built with React and D3 v5, it uses `scaleLinear` and `extent` to map data to SVG coordinates. Axis components render ticks and labels, while circular marks display each sample with tooltips. The dataset is loaded as CSV and all four numeric measurements plus species are available as axis options.

Ttrissentety

94% match

Loading thumbnail…

Interactive Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements through dropdown menus that switch the X and Y axes. Points are colored by species, with a color legend that fades non-hovered points for focused comparison. Built with React and D3 v7, the visualization uses D3's `scaleLinear` for axes and `scaleOrdinal` for categorical colors, rendering points as SVG circles. The code leverages React state for user selections and D3 utility functions like `csv` to load and parse the data.

Sstephanie0215

94% match

Loading thumbnail…

Fork of Scatter plot with color legend

This visualization displays the Iris dataset using an interactive scatter plot with linked dropdown menus for selecting the X and Y axes. Each point represents a flower specimen, colored by species with a corresponding color legend on the right side. The code uses React with hooks for state management and d3-scale's scaleLinear, scaleOrdinal, and extent functions, while rendering axes and marks as SVG elements through custom React components.

SShuyu Zheng

94% match