Skip to main content
SimilarExport ZIP
100%

snazzy scatter plot: w/ colors

✓ Published1🌍 Public
Zzach b.
Last edited Nov 6, 2020
Created on Nov 6, 2020

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which numerical attributes to plot on the X and Y axes, while points are colored by species using a d3.scaleOrdinal with a semi-transparent color scheme. Built with React and D3 v6, the visualization renders as SVG elements, with axes generated via d3.scaleLinear and data loaded asynchronously from a CSV file using d3.csv.

AI-generated description

A scatter plot of The Iris Dataset.

--
Datavis 2020 #33

MIT Licensed

Similar vizzes

Loading thumbnail…

snazzy scatter plot: w/ color legend

A scatter plot of the Iris dataset displays sepal and petal measurements, with points colored by species. The visualization uses interactive dropdown menus to select which measurement appears on each axis. Built with React and D3 v6, it renders SVG circles, axes, and a categorical color legend. Data is loaded from a CSV file, and the color scale uses distinct semi-transparent hues for each species.

Llzb1003
95% 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
95% match
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
94% 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
94% 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 through dropdown menus that select which attributes appear on each axis. The visualization uses React with d3.v5 scales, including scaleLinear for positioning and scaleOrdinal to encode species identity with distinct colors. SVG circles render the data points with tooltips showing exact values, while custom AxisBottom and AxisLeft components generate the tick marks and labels. The code employs d3.csv for data loading and d3.format for axis tick formatting.

MMrMartin85
94% 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
94% match
Loading thumbnail…

Scatter plot with color

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four measured attributes (sepal length, sepal width, petal length, and petal width) through dropdown menus that control the X and Y axes. Points are colored by species using d3.scaleOrdinal with three categorical colors. The visualization is built with React components managing state for axis selections, while d3.scaleLinear handles coordinate mapping and axis rendering uses custom SVG tick components. Data loading relies on d3.csv with type coercion for numeric fields.

LLewis Ward
94% match
Loading thumbnail…

Scatter plot with Colors

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.

Kkragovic
94% match