Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Menus Including Species

✓ Published0🌍 Public
Nnicolekevans
Last edited Nov 23, 2022
Created on Nov 23, 2022

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`.

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, 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…

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

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to choose which numeric measurements appear on the x- and y-axes via dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, and d3.axisBottom/axisLeft with tick marks. Circles are colored by iris species (setosa, versicolor, virginica) through CSS classes, with a legend overlay. The code utilizes d3-selection and d3-transition APIs within an SVG rendering approach.

NNYCUBK201
91% 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
91% match