income-transition

100%

income-transition

✓ Published0🌍 Public

Last edited Mar 19, 2018

Created on Feb 27, 2018

The visualization "income-transition" animates 1,500 circles representing people moving from a starting income quintile to an ending one, illustrating income mobility. Rendering with SVG via a custom `d3.select` and `d3.conventions` API, the animation chains transitions to move circles horizontally across the canvas, fading them in and out. The data is synthetic, generated with `d3.range` and random quintile assignments, while a tooltip div is prepared in the script.

AI-generated description

Similar vizzes

Loading thumbnail…

data-space-transition

Four animated transitions show how the same dataset—eight demographic groups with percentages—can be represented as rectangles and lines along a shared axis. A sliding vertical midpoint shifts between two values, with each transition morphing the visual encoding between bar lengths, path strokes, and interpolated rect tweens using d3 transitions. The SVG and canvas renderings cycle through these states on click, preserving color coding and axis labels. The code relies on d3 selections, transitions, and interpolators to animate the geometric transformations.

11wheel

74% match

Loading thumbnail…

Chained Transitions II

The visualization shows a vertical column of 50 black circles that move in a choreographed wave, sliding horizontally across the screen and then returning, one after another. The animation uses chained transitions to create a continuous looping sequence. Built with D3 v4, it employs `d3.active` to manage each circle’s transition chain, with `d3.scalePoint` positioning the circles vertically and `d3.scaleLinear` mapping the color gradient from yellow to blue based on the circle’s index. The code uses SVG circle elements and CSS styling, with each circle’s fill determined by its position in the modulo sequence.

HHelenaV

74% match

Loading thumbnail…

Transition each

This visualization animates a scatterplot of a numeric sequence, transitioning each point from a centralized starting position to its final (n, a) coordinate, where the sequence is generated by a recursive GCD-based rule. The animation uses D3 v4’s `transition` with staggered delays, while also randomizing each circle’s radius, opacity, and fill color from a categorical palette. Points are rendered as SVG circles via `d3.selectAll('circle')`, with axes added using `d3.axisBottom` and `d3.axisLeft`. The data is computed in code, referencing the Numberphile and OEIS A133058 sources.

WWill Carter

74% match

Loading thumbnail…

Chained Transitions

Fifty circles, each representing a discrete ordinal value, form a vertical column on the left edge of a 960 by 500 pixel canvas. The animation shows the circles moving horizontally back and forth, creating a chained, wave-like effect as each circle starts its journey after the previous one completes a traversal. The d3.js library (version 2.9.1) drives the motion, using a custom `slide` function to schedule `transition()` calls per circle, with each transition's duration dynamically calculated from the `Date.now()` timestamps to create the sequential delay. The source code is a single HTML file from a gist, with circles styled via CSS.

GGerHobbelt

73% match

Loading thumbnail…

D3 Transitions

Six colored circles of varying sizes move across a light green canvas, growing from and shrinking to a radius of zero at different speeds. The visualization demonstrates the D3 transition API, using a slow two-second transition to animate the circles' entry and exit by scaling their radius, while a fast 500-millisecond linear ease animates position updates. The sketch initializes six data points with id, x, y, r, and fill attributes, then uses D3's `select`, `transition`, and `easeLinear` functions to orchestrate the dynamic reshaping of the circle group. A video embed links to a YouTube demonstration of the transition effects.

SShad Frigui

73% match

Loading thumbnail…

transitions

This example animates a set of circles as they move and resize across a wide SVG canvas. Five circles, each driven by values from a static JavaScript array, shift their horizontal, vertical, and radius properties over a four-second duration. The code uses D3's `select()` to append the SVG and builds the animation with the `transition()` API, chaining `.duration()`, `.attr()`, and opacity settings. The circles are rendered as semi-transparent blue shapes, with the initial data divided by a constant factor within the external data module.

NNita

73% match

Loading thumbnail…

Untitled

Five circles sit on a shared horizontal axis, each sized by a value from the current dataset. A button switches between two data arrays, triggering a one-second transition that repositions circle radii and x-coordinates. Using D3.js v6 with SVG and animation, the code employs data joins, `enter`/`exit` selections, and `transition` to update the visualization. An axis line and a title label (highlighting the active dataset) complete the chart, which renders entirely in the browser.

Ssgzzhinde

73% match

Loading thumbnail…

Transition

The visualization demonstrates a multi-stage transition of fruit count data, first morphing circular bubbles into rectangular bars, then into a pie chart. It uses D3.js version 3.5.6 with SVG and animation via chained `transition()` calls, employing `d3.scale.ordinal` and `d3.scale.linear` for positioning. The data comes from `fruit.csv` with fruit names and counts. After five seconds, a `setTimeout` triggers a second transition where bars become pie slices using `d3.layout.pie` and `d3.svg.arc`, with y-axis removal and element replacement.

DDarienLiang

72% match