Skip to main content
100%

the story continues

✓ Published0🌍 Public
Aallilevine
Last edited Dec 22, 2015
Created on Dec 22, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Crowded Fiction

This example shows a growing, branching narrative text that updates over time, with each new line or phrase added to a crowded visual space. It uses d3.forceSimulation to position and collide text elements, while transitions animate the entry of new strings into the scene. The data comes from a gist, consisting of sequential addString commands, some paired with withFXAnimation and FXAnimDrip for special effects. The view is a live, evolving typographic composition where history and edits accumulate like a stream of consciousness.

SSohojoe
68% match
Loading thumbnail…

Gist 513940c8816d089296e3cffc9eba7f08

This visualization combines a force-directed network layout with an annotated narrative about Fox Terriers, mapping character traits and story fragments as connected nodes. The code uses D3’s `forceSimulation` with custom `forceLink` and `forceCollide` to position nodes, while `transition.attrTween` animates path strokes. The underlying data is a JSON structure derived from the Gist’s text, where each node represents a phrase or concept, and edges follow rhetorical links. Rendering relies on SVG paths generated via `d3.geoPath` for map-like background elements, though the core focus is the interactive graph. The visualization shows how anecdotal text segments, such as hunting stories or personality descriptions, form a semantic web, with color intensity encoding sentiment polarity extracted from the original Russian text.

AAlexDovgan
67% match
Loading thumbnail…

Gist 70625

This example visualizes a force-directed graph built with the D3.js library, using `d3.forceSimulation` to compute the layout. The graph’s nodes are rendered as text labels on an HTML5 Canvas, where each label displays a single character from the Gist’s source code. The visualization shows the spatial clustering of these characters, and the code calculates how many times a given character appears in a node’s adjacency list using a custom `f(ra,n)` method. The rendering approach relies on Canvas’s `fillText` for drawing labels, with the simulation updating positions each tick.

DDylanFM
66% match
Loading thumbnail…

Gist 77910f3bc3d3df6fc05e2f58f4d0ec1f

This animation demonstrates a force-directed network visualization where nodes and links reposition over time using D3.js’s `d3.forceSimulation` for physics-based layout. A standard `d3.transition().duration(750)` animates the movement of elements smoothly. The data comes from an external gist source, rendered as an animated SVG or canvas scene. The transition updates positions each tick, while the simulation’s velocity and collision constraints drive the final arrangement. The code relies on D3’s transition API, specifically `transition.attrTween` or similar, to interpolate coordinates between frames, making the network appear to fluidly settle into a stable configuration.

Aadamjanes
66% match
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
66% match
Loading thumbnail…

Gist 9232647

This example uses D3.js to visualize a network of interconnected text fragments, where each node is a sentence and links connect related phrases. The graph layout is driven by `d3.forceSimulation`, positioning nodes spatially based on their textual proximity. The visualization displays raw text content directly within each node, revealing the thematic clusters and semantic associations among the provided technical paragraphs. Rendering relies on SVG elements managed through D3’s data joins, with no additional libraries beyond core D3 modules.

Aandybak
66% match
Loading thumbnail…

Gist a7d5ced57721ac3f7075bbbbaee32a49

This interactive visualization uses a force-directed simulation to animate a network of nodes and links, showing how connected elements cluster and repel. The code relies on D3’s `d3.forceSimulation` with custom forces for charge, centering, and collision, while link positions update via the simulation’s tick handler. Node rendering uses SVG circles, and the visualization reads its data from an embedded array of node and link objects, with no external data source. The interaction includes drag-and-drop support via D3’s drag behavior, letting viewers move nodes while the simulation continuously recalculates positions.

11wheel
66% match
Loading thumbnail…

Gist 6db8115f185f7e57cb4395da0474fbf6

This example presents an interactive visualization of a network graph, where nodes are connected by curved links and can be dragged by the user. The code builds the layout using `d3.forceSimulation` for physics-based positioning and renders the scene with `d3.select` and SVG elements, including `transition.attrTween` for smooth link animations. It reads a JSON dataset of node and edge data from an external file, and uses `d3.zoom` for panning and scaling the view. The visualization shows how force-directed algorithms distribute connected nodes while user input adjusts the simulation in real time.

11wheel
65% match