Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus Including Species

✓ Published0🌍 Public
TT-Reiser
Last edited Oct 28, 2021
Created on Oct 28, 2021

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.

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

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
95% 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
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
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…

Scatter Plot With Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements across different species. Two dropdown menus, built with React, control which variables are plotted on the x and y axes. Hovering over a species in the color legend highlights those data points while dimming others, a feature implemented using React's `useState` and `onMouseEnter` events. Points are rendered as SVG circles using `d3.scaleLinear` for axes and `d3.scaleOrdinal` for colors, with the data fetched from a CSV file via `d3.csv`.

33ssalunke
94% match
Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across different species. Two dropdown menus let viewers select which attributes appear on the x and y axes, with the plot updating dynamically. Built with React and D3 v7, the example uses D3’s scaleLinear and extent for axis scaling, and renders the scatterplot as SVG circles with tooltips. The data is loaded via D3’s csv function from a remote GitHub gist.

Aalexandermodell
94% match