Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot Including Species

✓ Published0🌍 Public
NNita
Last edited Jun 12, 2021
Created on Jun 12, 2021

This interactive scatter plot visualizes the Iris Dataset, displaying measurements across quantitative axes selected via dropdown menus. The visualization implements a reusable chart pattern with `scatterPlot` and `menu` modules, using D3 v6's `selection.join` for smooth circle transitions and axis updates. Users can switch between petal width, sepal width, petal length, and species for either axis, triggering animated updates through `d3.transition`. Species data appears as categorical values, though the code currently maps multiple options to the same species column.

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

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal and petal dimensions across three species. Users can dynamically select which measurement appears on each axis through dropdown menus, with the chart redrawing to reflect the new configuration. The visualization uses D3.js v7 with SVG rendering, employing d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and d3.scaleOrdinal for color coding by species. The code loads data from a CSV file and includes a legend identifying the three species.

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

Fork of Animated Scatter Plot

This interactive scatter plot visualizes the Iris dataset, letting users compare measurements of sepal and petal dimensions across species. Dropdown menus dynamically change the x- and y-axis variables, and points (drawn as SVG circles) animate smoothly to their new positions via `d3.transition` with staggered delays. The chart is built with a reusable `scatterPlot` component that leverages `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for axes. Data is loaded from a remote CSV using `d3.csv`, and the scene adapts to the browser window size.

NNaimisha-M
90% 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
90% match