Skip to main content
SimilarExport ZIP
100%

Coloured ScatterPlot Menu

✓ Published2🌍 Public
PPadoSensei
Last edited Mar 29, 2021
Created on Mar 26, 2021

This interactive scatterplot displays the classic Iris flower dataset, allowing users to select which measurements appear on the X and Y axes via dropdown menus. The visualization is rendered as an SVG using D3 v6 within a React framework, with marks colored by species and an interactive color legend that fades unrelated points on hover. The code utilizes D3 scales like `scaleLinear` and `scaleOrdinal` to map data to positions and colors, with `csv` loading from a GitHub gist.

AI-generated description

Refactored Scatterplot with Menu in React. Now using Colour And now adding Colour Legend Now adding Legend Interactivity

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Color

This interactive scatterplot visualizes the Iris Dataset, with dropdown menus allowing users to select which flower measurements appear on the x- and y-axes. Each point represents an individual iris flower, colored by species using a d3.scaleOrdinal with three categorical colors. The React-based interface uses d3.csv for data loading, d3.scaleLinear for axis scales, and SVG circles rendered via React components for the marks. Axis components generate ticks and labels using D3 scale methods, while the axis labels and menus update dynamically based on user selections.

JJun Suzuki
93% match
Loading thumbnail…

Coloured ScatterPlot Menu with Interactive Legend

This interactive scatterplot uses the classic Iris flower dataset to explore relationships between four measurements—sepal length, sepal width, petal length, and petal width—across three species. Two dropdown menus let users select which numeric attributes appear on the x and y axes, while a categorical color legend assigns distinct hues to each species. Built with React and D3 v6, the SVG rendering uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and custom React components for axes, marks, and legend. The legend displays clickable color swatches that also serve as static labels, with axis ticks formatted using `d3.format`.

PPadoSensei
93% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot displays the Iris dataset, with dropdown menus enabling users to select which flower measurements appear on the x- and y-axes. Each point is colored by species using a D3 ordinal scale, and hovering reveals the sepal length via SVG circle titles. Built with React hooks for state management, the visualization uses D3 scales and the `csv` loader to parse data, while custom React components render the axes and marks.

MMario Ibarra
93% match
Loading thumbnail…

Scatter Plot with Menu and Colors

An interactive scatter plot of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the X and Y axes via React dropdown menus. The visualization uses D3’s `scaleLinear` for axes and `scaleOrdinal` for categorical species colors, with React rendering SVG circles for each data point. Tooltips show formatted axis values on hover, and axis labels update based on the selected attributes. Data is loaded asynchronously with D3’s `csv` and parsed into numeric values.

AAdriana Rodriguez Sanabria
93% match
Loading thumbnail…

colorised scatter plot with menu

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. Two dropdown menus let viewers select which attribute appears on the x-axis and y-axis, with the plot updating in response to their choices. Points are color-coded by species using a d3.scaleOrdinal function. The visualization uses React for state management and rendering, with D3 v5 (scaleLinear, extent, csv) handling data loading and scales, and SVG circles displaying each data point.

MMATTE-blz
93% match
Loading thumbnail…

Scatter Plot with Colour

This interactive scatter plot explores the classic Iris flower dataset, letting users compare numeric attributes by choosing which measurements appear on the x- and y-axes via two dropdown menus. Each point represents a flower specimen, colored by species using a d3.scaleOrdinal with a categorical palette, and tooltips reveal exact petal or sepal values. The React-based visualization uses d3.scaleLinear for both axes, renders circles as SVG elements, and reads the CSV data with d3.csv, with brushing and zooming absent from this implementation.

KKevin McMorrow
93% match
Loading thumbnail…

Color Polished Scatter plot with menus

This interactive scatter plot displays the Iris dataset, with dropdown menus that allow users to independently select which flower measurements to plot on the x- and y-axes. Each iris species is color-coded using a `scaleOrdinal` with a custom palette, while the axes are rendered with `scaleLinear` scales. Built with React and D3 v5, the visualization uses SVG for rendering, with custom `AxisBottom` and `AxisLeft` components for ticks and labels, and hover tooltips showing axis values via SVG `<title>` elements.

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

Scatter Plot with Colors

This interactive scatter plot displays the Iris dataset, visualizing relationships between different flower measurements. Users can select which attributes appear on the X and Y axes through dropdown menus. A color legend groups data points by species, and hovering over a legend entry dims all non-matching species marks. The visualization uses React with D3 v5 scales (scaleLinear, scaleOrdinal) and renders as SVG. The d3.csvParse function loads the dataset, while React state manages axis selections and hover interactions.

EEhtisham UL Hassan
93% match