Fork of Animated Scatter Plot with Menus
This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements across three species. The visualization features two dropdown menus that let users independently select which variables appear on the x and y axes from five options: petal width, sepal width, petal length, sepal length, and species. Built with D3 v6 and rendered as animated SVG, the chart uses smooth 1-second transitions to reposition and rescale both the circular marks and the axes whenever a menu selection changes. Newly added circles animate their radius from 0 to the target size, while existing points glide to their updated coordinates with a cascading delay effect, creating a polished, interactive exploration of the classic Iris dataset. The reusable chart pattern separates the scatter plot logic and menu components into modular functions, making it easy to adapt for other datasets.This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The visualization features two dropdown menus that let viewers dynamically select which data dimensions appear on the x and y axes, with smooth 1-second transitions animating points to their new positions. The chart implements a clean, reusable architecture using D3 v6, rendering circles colored by species with axis updates that smoothly interpolate to reflect the selected variables. The animation delay between points creates an engaging cascading effect during transitions, while the fixed menu overlay keeps controls always accessible. This example demonstrates modular chart composition, the general update pattern with enter/update/exit, and coordinated interactions between UI elements and the visualization. A modern sans-serif font gives the visualization a sleek, tech-forward appearance, and the implementation is inspired by Towards Reusable Charts and the Observable selection.join notebook, making it a practical reference for building flexible, reusable D3 components.This example shows a reusable scatter plot component built with D3 v6, inspired by Towards Reusable Charts and the selection.join pattern. It visualizes the classic Iris Dataset, letting users explore relationships between sepal and petal measurements across species.
The chart is constructed as a modular D3 component with a clean API for setting width, height, data, margin, and radius. Two dropdown menus, built using a custom reusable menu component, allow users to select which column to plot on the X and Y axes. The menus include options for all four numeric measurements—sepal and petal length and width—as well as species, enabling a wide range of comparisons.
What makes this example stand out is its careful attention to animation. When the chart initializes, points enter with a radius of zero and grow to their full size. When the user changes a menu selection, the points animate smoothly to their new positions with a 1-second transition, creating a nice ripple effect as they travel sequentially with a small delay between each point. The axes also animate to match the new scales.
The implementation uses a reusable chart module `scatterPlot.js` that follows the "Towards Reusable Charts" pattern, and a menu module for the dropdowns. This separation of concerns allows the chart to be easily customized and reused.
A particularly interesting detail is the animation sequencing. When the chart is first loaded, points "grow" from radius 0 to the target radius. When a menu is changed, the points update with a staggered delay (`(d, i) => i * 10`), creating a wave-like effect across the scatterplot. This gives a nice organic feel to the transitions.
---
Fork the previous chart and add menus to choose which columns to display on each axis. Demonstrates reusable charts and the use of the D3 selection.join pattern for smooth animated transitions. When the user changes the menu, the points move to their new positions with a smooth transition, and the axis scales animate accordingly. The initial view shows the petal width for both axes.
Please craft the description based on the above details. Keep it to a
short paragraph, under 50 words. Do not include any lists. Do not use
the word "This example". Only mention the D3 features from the source code as
"presented by D3.js" with the features in a comma-separated list.
Do not mention "SVG" in your description.
The description should be for the visualization only, not
implementation details. Aim for one or two sentences max.
---
IMPORTANT: Do not describe code logic. Describe what is seen in the visualization, e.g. "Circles represent ..." or "The x-axis maps ...". Do not include HTML or JS code in the description. Use markdown formatting. Use no more than 60 words.An animated scatter plot of the Iris dataset, with circles colored by species. Users can select the X and Y axes from dropdown menus to explore relationships between sepal and petal measurements. Points smoothly transition to their new positions, and axes update accordingly, providing an interactive way to examine the data's structure.