Un-truncate Text Tween

100%

Un-truncate Text Tween

✓ Published0🌍 Public

Last edited Feb 1, 2017

Created on Jan 31, 2017

A text label alternates between a short title and a longer explanatory sentence by smoothly truncating and expanding its visible characters. The animation uses D3 v4’s `transition` and `tween` methods with `d3.interpolate` to interpolate between string lengths, while `d3.easeLinear` controls the constant speed. The SVG text element is updated via `slice` in the tween callback, cycling through expand and shrink phases on a 3-second duration with a 1-second delay.

AI-generated description

Similar vizzes

Loading thumbnail…

Text Ticker Function

This example demonstrates a reusable text-ticker function that automatically animates long text horizontally when it exceeds its container’s width. A blue rectangle with a fixed size acts as the viewport, and a clip-path hides any text extending beyond its bounds. The implementation uses D3 v4’s `transition` with `d3.easeLinear` to move the text from right to left, then resets its position and loops indefinitely. The `tickText` function checks the text’s `getBBox().width` against a maximum width to trigger the animation.

TTommyCoin80

74% match

Loading thumbnail…

Text Transition I

A large number in a heading transitions continuously between random values up to one million, using a tween to interpolate the numeric value and reformat it with comma separators via `d3.format`. The animation runs in a repeating loop, with each cycle lasting 2.5 seconds followed by a 1.5-second pause. The code uses D3 v4’s `transition.tween` and `d3.interpolateNumber` to smoothly change the text content, unlike `transition.text`, which only sets the value once.

FFrissAnalytics

71% match

Loading thumbnail…

Text tween

A vertical bar chart displays the frequency of letters A through M as horizontal bars on a categorical y-axis. The chart uses D3 v3 to animate both the bar widths and accompanying text labels from zero to their target values over two seconds. The text labels tween numerically using D3's `d3.interpolate` and `transition.tween`, while bar rectangles animate with `transition.attr`. The x-axis formats values as percentages via `d3.format(".3s")`, and the data is loaded from a CSV file using `d3.csv`. SVG output is rendered with smooth easing.

MMatteoTomassetti

70% match

Loading thumbnail…

Text tween

A vertical bar chart displays letter frequencies from a CSV dataset, with each row featuring a green rectangle and a bold letter label. During a two-second transition, bars grow from zero width to their full value while accompanying text labels slide right and animate their numbers using `d3.interpolate` within a `.tween` callback. The code uses D3 v3 with SVG rendering, including ordinal and linear scales, axes, and `transition.ease` for smooth motion. The y-axis labels are styled bold, and the x-axis is hidden.

MMorganhaoyu

70% match

Loading thumbnail…

Untitled

This example demonstrates a looping text transition in which a div element toggles between the words "before" and "after" with a two-second delay and three-second duration. The code uses D3.js v7's selection methods, including `.text()`, `.style()`, and `.transition()`, within a `while(true)` loop to create continuous animation. The rendering approach is a minimal HTML page with no external data source, relying solely on D3 transitions to animate the text content and font size on an unstyled body.

Ssukumardunn

69% match

Loading thumbnail…

Text Transition II

A randomly generated integer fades in and out inside a large headline, replacing itself with a new value on each cycle. The example demonstrates a text transition technique that uses `d3.select` and `d3.transition` to create a repeating animation. On each start event, `d3.active` removes the old heading while a new `h1` element is appended, initially transparent, and its opacity is tweened from 0 to 1 using the `style` method. The process repeats indefinitely with a 1.5-second delay, showcasing D3’s ability to manage enter, update, and exit sequences for text elements.

Mmbostock

69% match

Loading thumbnail…

Gist 7330771

This example demonstrates how D3 transitions make data joins easier to follow by animating the entry, update, and exit states of SVG text elements. It shows a sequence of randomly selected alphabet letters that change every 1.5 seconds, with entering letters sliding down from above, exiting letters dropping below, and updated letters gliding horizontally to their new positions. The code uses D3’s selection joins with key functions, `transition.attr` and `transition.style` to animate positions and opacity, and relies on SVG text elements rendered in a single group. The data is a shuffled subset of the alphabet, sorted and re-joined with each interval.

11wheel

67% match

Loading thumbnail…

Text Transition I

A large numeral repeatedly and randomly transitions to a new value through an animated interpolation of its text content. The page uses d3.select on an h1 element and d3.transition.tween to create a custom text tween, interpolating between the current numeric value and a randomly generated number up to one million. The transition runs continuously via a recursive start event, with each new value appearing after a delay. Numbers are formatted with d3.format using commas.

Mmbostock

67% match