Scatter Plot with Menus include Species

100%

Scatter Plot with Menus include Species

✓ Published3🌍 Public

Last edited Aug 12, 2021

Created on Jun 24, 2021

Forked from Animated Scatter Plot with Menus

This scatter plot visualizes the Iris dataset, allowing users to compare any two measurements—sepal and petal length and width—through interactive dropdown menus. A third menu option maps the categorical species column onto either axis, positioning points discretely. The visualization uses d3.scaleLinear and d3.scalePoint for scaling, with smooth transitions via d3.transition. Data is loaded using d3.csv, and the reusable chart pattern from Towards Reusable Charts enables dynamic updates through d3.selection.join.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus Including Species

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements as well as species categories. Two dropdown menus, built with a reusable D3 `menu` module, let viewers change which quantitative or categorical attribute appears on the x-axis and y-axis. The chart uses D3 v6 with SVG rendering, implementing a reusable `scatterPlot` function that dynamically rescales axes using `scaleLinear` or `scalePoint` depending on data type, and animates circle positions and radii via `transition` and `selection.join`. Data loads from a GitHub-hosted CSV file.

TT-Reiser

94% match

Loading thumbnail…

Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, letting users switch both axes between sepal and petal measurements or categorical species. The D3 v6 code builds reusable `menu` and `scatterPlot` components, using `scaleLinear` and `scalePoint` for quantitative and categorical axes. When a menu changes, `selection.join` animates circles and axes via `transition`, with circles fading in and repositioning to reflect the new dimensions. SVG rendering with opacity-controlled points reveals data density.

OOleg Zhernovoy

94% match

Loading thumbnail…

Scatter Plot with Menus Including Species

This example demonstrates an interactive scatter plot of the Iris dataset, allowing users to dynamically select which quantitative or categorical variables appear on the x and y axes via dropdown menus. Built with D3.js v6, the visualization uses SVG rendering and animates transitions between configurations with a 1-second duration. The chart leverages D3’s scaleLinear, scalePoint, axisLeft, axisBottom, and transition APIs to update axes and circle positions smoothly. Data is loaded from a remote CSV file, and the plot supports both continuous and categorical axis scales.

CCurran Kelleher

92% match

Loading thumbnail…

Scatterplot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across different species. Two dropdown menus let viewers independently select which attribute appears on the X and Y axes, with axis labels updating dynamically to reflect the chosen dimensions. The visualization is built with React and renders SVG circles using d3.scaleLinear for coordinate mapping, while d3.extent and d3.csv handle data scaling and loading from a remote CSV file. Tooltips display formatted attribute values on hover.

JJun Suzuki

92% match

Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus, built with a custom D3 menu component using `d3.dispatch`, control which quantitative or categorical attributes map to the x and y axes. The chart uses `d3.scaleLinear` and `d3.scalePoint` for scaling, with SVG circles animated via `d3.transition` and `selection.join` for smooth updates.

Ccsantiagopaz

92% match

Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, enabling users to explore relationships between sepal and petal measurements through dropdown menus that switch both axes and support categorical species encoding. The visualization uses D3 v6 with a reusable chart pattern, employing `selection.join` for smooth enter/update/exit transitions that animate circle positions and growth. SVG rendering with `scaleLinear` and `scalePoint` scales adapts to quantitative or categorical data, while custom menus dispatch change events to update the plot dynamically.

TThiago Sawada

92% match

Loading thumbnail…

Scatter Plot with Menus Including Species - TN

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that assign either quantitative or categorical variables to the x- and y-axes. The visualization uses D3 v6’s selection.join to smoothly transition data-driven circle positions and scales, with axes updating via d3.axisLeft and d3.axisBottom. The code employs d3.scaleLinear and d3.scalePoint for continuous and categorical mappings, respectively, and animates circle growth on entry using d3.transition with a one-second duration.

TToly

92% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus select which attributes appear on the x and y axes, with options for all four numeric measurements and species. The visualization uses React hooks for state management, d3.scaleLinear for axis scaling, and d3.csv for data loading. Points are rendered as SVG circles with native tooltips showing the x-axis value.

MMinh Luong

92% match