Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color

✓ Published0🌍 Public
BBen Brophy
Last edited Jan 3, 2022
Created on Jan 3, 2022

This interactive scatter plot of the Iris Dataset allows users to explore relationships between sepal and petal measurements. Two dropdown menus, built with ReactDropdown, select the attributes for the X and Y axes, with axis labels updating accordingly. The SVG visualization uses D3 scales, extents, and formatting via `scaleLinear`, `extent`, and `format` to render axes and a static set of teal circular marks, each with a tooltip showing the x-value. Data is loaded from a CSV file hosted on GitHub using D3's `csv` function.

AI-generated description

A scatterplot of the Iris Dataset

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. 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 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
95% match
Loading thumbnail…

Scatter plot with colour

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus dynamically select which numeric attributes appear on the x and y axes, with the chart updating through React state management. The visualization uses d3.scaleLinear for both axes, d3.extent for domain calculation, and renders SVG circles through a reusable Bars component. Data loads asynchronously via d3.csv from a remote gist, with axis ticks styled through CSS classes and formatted using d3.format.

Jjackcaldwellnichols
95% 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
95% match
Loading thumbnail…

Scatterplot with Color

This interactive scatterplot displays the Iris Dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus select which measurement appears on the x- and y-axes, while color encodes the iris species. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and renders SVG circles via reusable components. Hovering over a point reveals its value in a native `<title>` tooltip. The data loads asynchronously from a CSV using D3’s `csv` function.

Jjanneprice
95% 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 visualization features dropdown menus to switch which attributes appear on the x and y axes, with species distinguished by color using a categorical scale. Built with React and D3 v5, the chart uses d3.scaleLinear for axes and d3.scaleOrdinal for color encoding, rendering SVG circles with tooltips that display precise values. The CSV data is loaded asynchronously via d3.csv and typed numerically before plotting.

RRiccardo De Lucia
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
95% 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
95% match