Skip to main content
SimilarExport ZIP
100%

Dataviz 9 - Scatter plot with Menus (Colour Legend)

✓ Published1🌍 Public
RRyAlpha
Last edited Nov 26, 2021
Created on Nov 26, 2021

This scatter plot displays the Iris dataset, showing relationships between sepal and petal measurements for three iris species. Users can select different attributes for the X and Y axes via dropdown menus, with species colors differentiated through an ordinal color legend using d3.scaleOrdinal. The visualization uses React with SVG rendering, importing axis components (AxisBottom, AxisLeft), a ColorLegend, and Marks that render circles with tooltips. Data loading relies on d3.csv from a CDN-hosted gist, with linear scales mapping the numeric measurements.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 9 - Scatter plot with Menus (Coloured)

This interactive scatter plot visualizes the Iris Dataset, letting users independently choose which of the four flower measurements to plot on the X and Y axes using React dropdown menus. Species are distinguished by color through a d3.scaleOrdinal mapping to a three-color palette. The visualization is rendered as SVG using React components, with axes and marks generated via d3.scaleLinear, d3.extent, and custom React components for the bottom and left axes, alongside d3.csv for data loading and d3.format for tick labels.

RRyAlpha
94% match
Loading thumbnail…

Scatter Plot with Menus, Color Legend

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. Two dropdown menus let viewers switch which quantitative attributes appear on the x and y axes, while a color legend maps each species to a distinct hue. The visualization uses React state management with d3.scaleLinear for axes, d3.scaleOrdinal for colors, and SVG circles rendered via React components. CSV data is loaded asynchronously using d3.csv, with axes and labels drawn from reusable custom React components.

SSai Phaltankar
94% match
Loading thumbnail…

Dataviz 9 - Scatter plot with Menus (Interactive Colour Legend)

This interactive scatter plot displays the classic Iris dataset, letting users choose any two attributes for the x- and y-axes via React dropdown menus. The visualization uses an interactive color legend where hovering over a species name dims all other points, highlighting the selected species. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleOrdinal` to map measurements and species to positions and colors, rendering all marks as SVG circles.

RRyAlpha
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus let viewers switch the X and Y axes among four numeric attributes, while a color legend distinguishes species using d3.scaleOrdinal with three categorical colors. The visualization renders as SVG using React components, with d3.scaleLinear handling axis scales and d3.extent computing domains. Marks are drawn as colored circles with tooltips showing values. The data loads asynchronously via d3.csv from a GitHub gist.

MMichael Bruno
93% match
Loading thumbnail…

Color Polished Scatter plot with menus with legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes for the X and Y axes via dropdown menus. A color legend distinguishes the three iris species. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading, rendering as SVG with reusable axis and mark components.

Nn.koldovsky@gmail.com
92% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which attributes appear on the X and Y axes, while a color legend enables hovering to highlight specific species by dimming others. The visualization uses React for component state management, d3.scaleLinear and d3.scaleOrdinal for coordinate and color mapping, and renders as an SVG with reusable axis, mark, and legend components.

Sstevensmithj
92% match
Loading thumbnail…

Scatter Plot with Color Legends

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which quantitative attributes appear on the x- and y-axes, while a color legend distinguishes species using a d3.scaleOrdinal with categorical colors. The visualization is built with React, rendering SVG circles through the Marks component, with d3.scaleLinear scales mapping data to positions on axes generated by custom AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV file using d3.csv.

Tthomasjungcoe
92% match
Loading thumbnail…

Dataviz 9 - Scatter plot with Menus

This interactive scatter plot explores the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. Each point represents a flower specimen, positioned according to its sepal and petal dimensions. The visualization uses React for state management and rendering, while D3.js v5 handles data loading, linear scaling (scaleLinear), and SVG axis generation. The data is parsed from a CSV file using D3’s csv function, and axis labels update dynamically to reflect the selected attributes.

RRyAlpha
92% match