Reusable Animated D3 Scatterplot with Category Data

100%

Reusable Animated D3 Scatterplot with Category Data

✓ Published0🌍 Public

Last edited May 1, 2024

Created on Apr 15, 2024

Forked from Reusable Animated D3 Scatterplot with Menu

This interactive scatterplot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus let users switch any axis between quantitative measurements or the categorical species attribute, with points smoothly animating to new positions over two seconds. Species are distinguished by both color and different geometric symbols, and axes and titles transition accordingly. Built with D3 7.9, it uses `scalePoint` for categorical axes, `scaleLinear` for quantitative ones, `transition` for synchronized animations, and `symbol` for marker shapes, rendering as SVG.

AI-generated description

Part of the "Get it Right in Black and White" course, an edited collection of live streams taught by Dr. Curran Kelleher.

MIT Licensed

Similar vizzes

Loading thumbnail…

Animated D3 Scatterplot with Species

This interactive scatterplot displays the Iris dataset, plotting sepal and petal measurements as individual points. Users can dynamically select which quantitative or categorical variable appears on either axis, and the points smoothly transition to their new positions. The visualization uses D3.js (v7) internally, leveraging `scaleLinear`, `scalePoint`, and `transition` for the animated updates whenever the axis selections change.

HHtet Yan Oo

91% match

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This example presents an interactive scatter plot of the classic Iris dataset, using D3.js to visualize the relationships between sepal and petal measurements. The visualization cycles through different variable pairings on the x-axis every three seconds, with animated transitions between states. It employs D3's `scaleLinear` for coordinate mapping, `transition` for smooth animations, and the `.join` pattern for idempotent SVG rendering with growing and updating circles. Data is loaded via `d3.csv` and parsed dynamically.

Vvivhogan@gmail.com

91% match

Loading thumbnail…

Animated D3 Scatter Plot including species

This animated scatter plot, built with React and D3, visualizes the classic Iris flower dataset. Users can dynamically select which quantitative measurements (sepal length/width, petal length/width) or the categorical species label to map to the x and y axes via interactive dropdown menus. The visualization employs SVG circles with a 20% opacity, and when axes are changed, the points smoothly transition to their new positions over a one-second duration using D3's `transition` and staggered delays. The code uses D3 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `extent` to handle scaling, axes, and data domains, with data loaded from a GitHub-hosted CSV file.

Ppawelsapiecha

90% match

Loading thumbnail…

Scatterplot Including Species

This interactive scatterplot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across species. Users switch quantitative and categorical axes via dropdown menus, triggering smooth transitions as points and axes update. Built with D3 v7, the visualization uses d3.scaleLinear, d3.scalePoint, and transition to animate circle positions, with menus implemented through a custom dispatch-based module. The SVG renders animated circles that grow on entry and re-position with staggered delays when axes change.

Aajoua

90% match

Loading thumbnail…

Animated menued plot + categories

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four quantitative measurements (sepal and petal length/width) and species categories. Two dropdown menus, built with a reusable D3 menu module, control which column is mapped to the x and y axes, with scales switching between linear and point scales depending on data type. Points animate smoothly when axes change using `d3.transition`, while axis labels and circles update accordingly. The visualization is rendered as SVG with D3 v6, using a custom `scatterPlot` function and `d3.csv` for data loading, with all text styled in the Share Tech font.

GGullyPlook

90% match

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This example visualizes the Iris Dataset as an animated, reusable scatter plot built with D3 v7. It displays sepal and petal measurements as circles, cycling the x-axis variable every two seconds among petal width, sepal width, petal length, and sepal length. Using `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function, it smoothly transitions circle positions and axis scales over a 2000-millisecond duration with `transition`. SVG rendering handles the marks, labels, and axes.

MMichael Bergerson

90% match

Loading thumbnail…

Animated Reusable D3 ScatterPlot

This animated scatterplot visualizes the Iris flower dataset, with points colored and shaped by species and mapped to petal length, sepal length, and width scales. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `transition` to animate circle positions and radii. The reusable `scatterPlot` module updates marks via data joins, while axes redraw smoothly as the view transitions.

Ccssergio

90% match

Loading thumbnail…

Animated Reusable D3 Scatterplot with Symbols and Menu

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through menus in D3 v7 with React. Circles representing flowers animate smoothly between positions using d3.transition when axis selections change, while colors denote species. The visualization implements a reusable scatterPlot function with d3.scaleLinear, d3.scaleOrdinal, and axis components, rendered as SVG elements.

Mmegan-grannan

90% match