Skip to main content
SimilarExport ZIP
100%

Scatter plot with Colors

✓ Published1🌍 Public
Kkragovic
Last edited Apr 2, 2021
Created on Apr 2, 2021

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements. The visualization uses React dropdown menus to dynamically switch which numerical attributes are plotted on the x and y axes. Each of the 150 flowers is rendered as a colored circle, with species mapped to a categorical color scale (`d3.scaleOrdinal`) using orange, teal, and purple. The chart is built with React and D3 v6, using SVG circles for marks and custom axis components that employ `d3.scaleLinear` for positioning.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, letting users explore relationships between sepal and petal measurements across three flower species. Color encodes species, while dropdown menus dynamically select which attributes map to the x and y axes. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and SVG circles rendered by custom React components. Axis components generate ticks and labels, while `csv` loads the remote dataset. A native SVG `<title>` element provides hover tooltips.

AAudrey
96% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The chart uses color encoding to distinguish species, with dropdown menus to switch which quantitative attributes are plotted on the x- and y-axes. Built with React and D3 v5, it renders SVG circles for each data point, using d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.extent for domain computation. Data is loaded asynchronously via d3.csv from a remote source.

SSam Hege
96% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus switch which numeric attribute appears on the x- and y-axes, while a categorical color scale distinguishes the three iris species. Powered by React and D3 v5, the SVG visualization uses `scaleLinear`, `scaleOrdinal`, and `csv` to load and render data from a GitHub gist, with axis and mark components built from reusable React functions.

Ccynichole
96% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot explores the classic Iris dataset, allowing users to compare any two measured attributes (sepal and petal dimensions) by selecting them from dropdown menus. Each flower is rendered as a circle in SVG, with position mapped by the selected X and Y axes and color encoding species via a D3 `scaleOrdinal` color scale. Built with React and D3 v7, the visualization uses `scaleLinear` for axes and interactive dropdowns to dynamically re-bind the plotted data.

SSerind Joshua McCue
96% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The chart displays data points colored by species, with dropdown menus to switch which attributes appear on the x and y axes. Built with React and D3 v7, it uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical coloring, and d3.csv, d3.extent, and d3.max for data processing and scale domains. SVG rendering with React components handles axes, marks, and hover tooltips.

JJoe Hutchins
96% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The chart uses D3 v6 scales and SVG rendering within a React framework, with dropdown menus to switch X and Y attributes. Hovering over the color legend highlights points of a selected species while fading others, using d3.scaleOrdinal for categorical coloring. The visualization includes axes with formatted tick labels, a color legend, and tooltips via SVG title elements.

JJohn Huang
96% match
Loading thumbnail…

Scatterplot with color

This interactive scatterplot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements across three flower species. Each point is colored by species using d3.scaleOrdinal, with dropdown menus powered by ReactDropdown to switch which quantitative attributes appear on the x and y axes. The chart renders as SVG with React components, using d3.scaleLinear for axes and d3.extent to compute domains dynamically. Data loads asynchronously via d3.csv, and the interface includes labeled axes and hover tooltips showing species names.

Ssurikmeetr
96% match
Loading thumbnail…

Scatter plot with colour

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus select which attributes appear on the x and y axes, while color distinguishes the three iris species. The visualization uses React with functional components, D3 v5 scales including `scaleLinear` and `scaleOrdinal` for mapping data to positions and colors, and renders marks as SVG circles. Axes are custom components built from D3 tick values, and the data loads asynchronously from a CSV file using `d3.csv`.

AAndrea Picciau
96% match