Fork of Scatter Plot with Menus Including Species

100%

Fork of Scatter Plot with Menus Including Species

✓ Published0🌍 Public

Last edited Oct 6, 2021

Created on Oct 6, 2021

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

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…

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

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…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot displays the classic Iris dataset, allowing users to compare different flower measurements by selecting which attributes to plot on the x and y axes through dropdown menus. The visualization dynamically updates the positions of the data points, with points representing different species. Built with D3 v6, the example leverages modular chart components and the selection-join pattern for reusable visualizations, incorporating scales for quantitative and categorical axes, animated transitions for smooth updates, and SVG rendering for crisp display.

Zzhuomo-maker

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus

An interactive scatter plot of the Iris dataset lets users select which flower measurements to compare on the x- and y-axes via two dropdown menus. Each point represents a sample, colored by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with a legend. The visualization uses D3 v5 to render SVG axes, circles, and labels, with transitions updating the plot whenever menu selections change.

Ccpsu00

94% match

Loading thumbnail…

Fork of Fork of Scatter Plot with Menus Including Species

A scatter plot of the Iris dataset uses D3 v6 selection joins and transitions to animate circles between axes as users change the X and Y variables through two dropdown menus. The reusable scatterPlot module applies either d3.scaleLinear or d3.scalePoint depending on whether the selected column is quantitative or categorical, and renders axes with d3.axisBottom and d3.axisLeft. The menu component uses a d3.dispatch for change events.

Ccsantiagopaz

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

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between quantitative measurements (bomp, perbarrel, tfc, wc) and the categorical Date. Users switch axes via dropdown menus built with the `menu` component, triggering animated transitions of circles using D3's `transition()` and `scaleLinear`/`scalePoint` scales. The SVG rendering employs the `selectAll().join()` pattern for efficient updates, with axes re-rendered via `axisLeft` and `axisBottom`.

Nnicolekevans

93% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, with dropdown menus that let users select which flower measurements map to the x and y axes. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, and `axisBottom` for the plot, while a custom `dropdownMenu` module handles the HTML select elements. When a menu changes, the scatter plot transitions smoothly over two seconds, animating circles to their new positions with staggered delays. Data comes from the built-in iris.csv file, and points are colored by species using `scaleOrdinal` with `schemeCategory10`.

Yyhcmv5

93% match