Skip to main content
SimilarExport ZIP
100%

Episode 12 - Scatterplot Including Species w/ Axes (GIRIBAW)

✓ Published1🌍 Public
Eemberix@gmail.com
Last edited Aug 21, 2021
Created on Jun 19, 2021

This interactive scatterplot visualizes the Iris dataset, allowing users to compare measurements like petal and sepal width or length, with the option to map species to an axis. The visualization supports animated transitions between axis selections via D3’s `transition` and delayed updates. It uses `d3.csv` for data loading, `scaleLinear` and `scalePoint` for quantitative and categorical axes, and custom reusable modules (`scatterPlot.js`, `menu.js`) built on D3’s selection and dispatch APIs. The SVG renders semi-transparent circles with axis labels and menus for control.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Episode 12 - Scatterplot Including Species (GIRIBAW)

This interactive scatterplot allows users to explore the Iris flower dataset, comparing measurements like sepal and petal length and width, and species. The visualization uses D3.js to create an SVG plot with automatically scaled axes, supporting both quantitative and categorical variables. Users can change the x and y axes via dropdown menus, triggering smooth transitions of the data points. The iris data is loaded from a remote CSV file, and the plot updates with a 600ms transition and staggered delays for each circle.

Eemberix@gmail.com
95% match
Loading thumbnail…

Episode 11 - Animated Scatterplot with Menus (GIRIBAW)

This interactive scatterplot visualizes the Iris dataset, with dropdown menus letting viewers choose which sepal or petal measurements appear on the x- and y-axes. Built with D3.js v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for scaling and axes, while `transition()` animates circle positions and axes over 800ms when selections change. The menu component leverages D3's `dispatch` for change events, and data is loaded via `d3.csv` from a GitHub Gist, rendered as SVG with entering circles growing from radius 0.

Eemberix@gmail.com
91% match
Loading thumbnail…

Scatter Plot episode 12

This interactive scatter plot visualizes the Iris dataset, letting users switch the x and y axes via dropdown menus. D3 v6 selection joins animate circles with staggered delays as axes and point positions update. The chart uses d3.scaleLinear for quantitative columns, d3.scalePoint for categorical species, and transitions to smoothly grow and reposition SVG circles.

BBart van Pelt
89% match
Loading thumbnail…

Episode 12

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements and species. The visualization features dropdown menus to select which quantitative or categorical columns map to the x- and y-axes, with the chart dynamically re-rendering when selections change. Built using D3 v6 and the selection.join pattern, it uses d3.scaleLinear for continuous data and d3.scalePoint for categorical species values, with 1000ms transitions animating the circles as scores update. The iris data is loaded from a GitHub Gist, and the SVG rendering includes shared axis transitions.

Aadventuresenglish.info@gmail.com
88% match
Loading thumbnail…

Episode 10 - Animated Reusable d3 Scatterplot (GIRIBAW)

An animated scatterplot cycles through four Iris flower measurements, updating every three seconds. Built with D3 v6, it loads the Iris dataset from a GitHub Gist, renders SVG circles and axes, and reuses a custom `scatterPlot` function with setters. The code uses `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to smoothly move points and axes between states. Circle enter and update transitions stagger delays, animating positions and radii for a fluid exploratory view of the data.

Eemberix@gmail.com
87% match
Loading thumbnail…

12. Scatterplot with Species

This interactive scatterplot displays the classic Iris flower dataset, encoding measurements like petal and sepal dimensions as points. Using React and SVG, the visualization allows users to dynamically select which quantitative or categorical columns map to the X and Y axes via dropdown menus built with a custom `menu` function. Data is loaded from a remote CSV using `d3.csv`. When axes change, the scatter plot updates smoothly, leveraging D3’s `transition` API to animate circles to new positions over one second. Axis labels and tick marks transition accordingly, with `d3.scaleLinear` and `d3.scalePoint` handling numeric and categorical scales.

Kktshim@snu.ac.kr
87% match
Loading thumbnail…

Ep. 11 Scatter Plot (Animated) w/ Menu

This interactive scatter plot displays the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus, built with a custom `d3.dispatch`-based menu component, let viewers select which measurement appears on each axis. When a selection changes, the visualization animates smoothly, with circles transitioning to new positions using `d3.transition`. The chart is rendered as SVG, with axes and circles updated dynamically, while colors encode species using `d3.scaleOrdinal` with `schemeCategory10`. Hovering temporarily enlarges circles via CSS.

Ddanheavern
86% match
Loading thumbnail…

Scatter Plot Including Species

This interactive scatter plot visualizes the classic Iris dataset, letting users explore relationships between sepal and petal measurements by switching axes via dropdown menus. Built with D3 v7, the visualization supports both numerical and categorical axes, with circles transitioning smoothly between positions using `d3.transition`. The scatter plot component uses `scaleLinear` and `scalePoint` for scaling, while SVG rendering and axis generation via `axisLeft` and `axisBottom` update dynamically as selections change.

Nnim@brejnholt.dk
86% match