Scatter Plot with Menus Including Species

100%

Scatter Plot with Menus Including Species

✓ Published0🌍 Public

Last edited Dec 28, 2022

Created on Dec 28, 2022

Forked from 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.

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

96% 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

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through drop-down menus for the X and Y axes. Built with D3 v6, it uses the `d3.selection.join` API to animate transitions when axes change, with points smoothly moving to new positions over one second. The chart scales axes using either `d3.scaleLinear` for quantitative data or `d3.scalePoint` for categorical species, while SVG circles are rendered with opacity and the page includes custom menus from a reusable `menu` module.

RRidhima Saxena

95% match

Loading thumbnail…

Scatter Plot with Menus Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users switch between quantitative attributes (sepal/petal width and length) and categorical species for the x and y axes via dropdown menus. Built with D3 v7, it uses `scaleLinear` and `scalePoint` to adapt axes to data types, with animated transitions on circles and axes. The chart renders as SVG with a reusable `scatterPlot` function and a custom `menu` component that dispatches change events.

AAndre J Denais

94% 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

94% match

Loading thumbnail…

Animated D3 Scatterplot with Menus with Species

This interactive scatterplot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across species. The visualization uses D3.js (v7) with an SVG rendering approach, featuring dropdown menus to dynamically switch which numerical or categorical attributes appear on the x and y axes. When a selection changes, circles smoothly transition to new positions over one second using the `transition` API, with axis titles and scale types (numerical vs. categorical) updating to match. The code employs reusable components for the scatter plot and menus, built with the join pattern for efficient DOM updates as data mappings change.

HHtet Yan Oo

94% match

Loading thumbnail…

Scatter Plot with menu including species

This animated scatter plot visualizes the Iris Dataset, allowing users to dynamically switch which quantitative measurements (sepal length/width, petal length/width) appear on the x- and y-axes via drop-down menus. Using D3.js selection joins, circles animate smoothly between positions when axes change, with staggered transitions for updates and radius-growing effects on entry. The chart renders as SVG with animated axes and a categorical species option included in the menu.

AAdekola Aliu

94% match

Loading thumbnail…

Scatter Plot with Menus include Species

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.

AAndre J Denais

94% match