Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus Including Species

✓ Published32🌍 Public
CCurran Kelleher
Last edited Jul 23, 2024
Created on Jun 12, 2021

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.

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…

Animated Scatter Plot with Menus

This example presents the classic Iris dataset as an interactive scatter plot embedded in a full-screen SVG. Two dropdown menus let viewers dynamically switch the variables mapped to the x and y axes, choosing among the four quantitative measurements or the categorical species label. The visualization is built with D3 v6, using the `select` API for declarative DOM manipulation and `transition` to animate the movement of the data points, which reposition with a staggered delay to their new coordinates. The menus themselves are constructed using a reusable JavaScript component pattern, demonstrating a modular approach to building interactive charts.

TTammminana
93% 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 quantitative measurements and categorical species through dropdown menus that change the x- and y-axis variables. It distinguishes between quantitative and categorical scales using d3.scaleLinear and d3.scalePoint, rendering circles as SVG elements with animated transitions via d3.transition and the selection.join pattern. Menus are built with a custom reusable d3 menu component using d3.dispatch for change events, with axes updated through d3.axisLeft and d3.axisBottom.

PPeter VanNostrand
93% 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
93% 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
92% match
Loading thumbnail…

Animated Scatter Plot with Menus

This example visualizes the Iris dataset as an animated scatter plot with interactive dropdown menus for selecting the x and y variables. The plot uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map data coordinates, while `d3.transition` animates circle positions, radii, and axis updates over 1000 milliseconds. The menus are built with a reusable `menu` component that dispatches `change` events, and the chart itself follows a reusable `scatterPlot` pattern using `selection.join` for enter/update/exit handling. Data is loaded via `d3.csv` from a gist URL, rendered as SVG circles, and includes species labels among the selectable columns.

AAndre J Denais
92% match
Loading thumbnail…

Animated Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, where dropdown menus let users switch which attributes map to the X and Y axes. Built with D3 v6, the visualization animates point positions and axis scales over one second using `transition()`, while the HTML menus are created with a custom `menu()` component that dispatches change events. SVG circles grow from a zero radius on entry, and the plot is rendered using scaleLinear, axisLeft, and axisBottom.

CCurran Kelleher
92% match
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
92% match
Loading thumbnail…

Animated Scatter Plot with Menus

An animated scatter plot visualizes the Iris dataset, allowing interactive exploration of relationships between four numeric measurements and species. Users select which column drives the x- and y-axes via dropdown menus, triggering a staggered transition of 150 points as they reposition. The D3.js code uses `selection.join` for efficient enter/update/exit handling, `transition` for smooth animations, and scale functions (`d3.scaleLinear`, `d3.scalePoint`) to map data to coordinates. Hovering highlights a point and shows a tooltip. The SVG plot includes axis labels and uses D3's `axisBottom` and `axisLeft` for ticks.

LLouis Astorg
92% match