jack_jill_method_chaining

100%

jack_jill_method_chaining

✓ Published0🌍 Public

Last edited Jan 27, 2019

Created on Jan 27, 2019

This example visualizes the classic nursery rhyme "Jack and Jill" as a method-chaining sequence, where each action in the story corresponds to a link in a chain. It shows the narrative flow from going up the hill to tumbling after, with each step represented as a distinct visual node. The code uses D3.js’s `d3.forceSimulation` to lay out the chain nodes and links, while custom JavaScript functions animate the transitions between story stages. The rendering relies on SVG elements and D3’s `transition.attrTween` to smoothly move nodes along the chain. The data is hardcoded from the rhyme, not sourced externally.

AI-generated description

Similar vizzes

Loading thumbnail…

jack_jill_nested_calls

This example visualizes a nested sequence of function calls as a branching tree layout, where each call—such as `went_up`, `fetch`, and `tumble_after`—appears as a node with its arguments as child branches. It shows the hierarchical flow of a story’s actions, with the root call `tumble_after` at the top and leaf nodes like `jack_jill` and `"hill"` at the bottom. The code uses `d3.forceSimulation` to position nodes and `d3.linkHorizontal` for curved edges, while the data is a hardcoded JavaScript object representing the call tree. Rendering is done with SVG paths and circles, styled via `d3.select` and `attr`.

Aadiamaan92

79% match

Loading thumbnail…

Force-Directed Layout

This example shows a force-directed network graph where nodes appear incrementally, followed by their connecting links chaining into view one by one. Built with the D3 v2 `d3.layout.force`, it renders SVG circles and lines using data from the "miserables.json" character co-occurrence dataset. Each node fades in via `transition().delay()` and `attr("opacity")`; once visible, its links are queued and faded in sequentially through chained transitions triggered by the tick event.

GGerHobbelt

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

64% match

Loading thumbnail…

the story continues

This visualization tells a branching story about a dumpling through a sequence of text fragments, each rendered as a node in a force-directed graph. It shows how a narrative can be built from overlapping, timestamped user inputs that accumulate over time. The code uses `d3.forceSimulation` to position the text nodes and `d3.select` with `transition.attrTween` to animate their appearance. Each fragment is loaded from a gist, and the graph visually connects the entries in chronological order, revealing the story’s progression from “the beginning” to the duck’s fate.

Aallilevine

64% match

Loading thumbnail…

Chained Transitions II

Fifty black circles in a vertical column slide horizontally across the canvas, one after another, creating a cascading wave of motion. Each circle’s fill shifts from pale yellow to deep navy based on its position, using a linear scale with HCL interpolation. The animation uses D3 v4’s `d3.active` to chain transitions, with each circle’s start event triggering a sequence of left-to-right and right-to-left movements via `transition.attr` and `on("start", slide)`. The SVG rendering relies on a point scale for vertical placement and a delayed transition per circle.

AAlan McConchie

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

63% match

Loading thumbnail…

Fork of D3 Transitions

This example illustrates a fork of the classic D3 transitions, showcasing a force-directed network graph where nodes and links transition smoothly between positions. It uses `d3.forceSimulation` to compute the layout and `transition.attrTween` with the `d3.interpolate` function to animate the movement of SVG circles and lines. The rendering is entirely SVG-based, with a light background and plain node styling, highlighting the ease of chaining behavior and modifying attributes in D3 v3. The data appears to be a small static set of nodes and links, demonstrating how force simulation can be combined with custom transition sequencing.

CCinSiangNg

62% match

Loading thumbnail…

Chained Transitions

Fifty black circles, each representing one step in a 50-point scale, are arranged along the left edge of an SVG. Chained transitions, created using `transition.transition` and `d3.active`, repeatedly sweep each circle horizontally across the frame and back, with staggered delays creating a cascading wave effect. The circles’ fill colors interpolate between light yellow and dark blue via a linear scale with `d3.interpolateHcl`. The animation runs concurrently on all elements, inheriting the original transition’s reference time to ensure synchronized looping.

Mmbostock

62% match