Gist 1e176e585c52d148b22c

100%

Gist 1e176e585c52d148b22c

✓ Published0🌍 Public

Last edited Feb 10, 2015

Created on Feb 10, 2015

This visualization displays a dramatized reading of an H.P. Lovecraft story, using the source text from a gist by CliffordAnderson. The code lays out the narrative text as a flowing, interactive typographical canvas, with the story's words serving as the primary visual elements. It uses the D3.js library to compute a force-directed layout, positioning each word as a node that repels and attracts neighbors, creating an organic, self-organizing text block. The rendering relies on D3’s SVG system, allowing users to see and manipulate the clustered text, though the excerpt provided highlights the story's eerie opening lines.

AI-generated description

Similar vizzes

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

69% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

66% match

Loading thumbnail…

<title>Eldorado

The visualization shows a line-by-line reading of Poe’s poem *Eldorado*, mapping each verse’s length and stanza structure as a static typographic grid. It uses D3.js’s `d3.forceSimulation` to arrange the lines into a loose, non-linear cluster, while `d3.select` and `d3.scaleOrdinal` color-code the four stanzas. The poem’s text is drawn from the provided TEI/XML source, with each line rendered as a separate SVG text element. No animation or interaction is present; the layout simply emphasizes the poem’s rhythmic alternation between short and long lines.

CCliffordAnderson

66% match

Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl

66% match

Loading thumbnail…

Gist 466252

This example is a data-art composition built from a personal list of recommended web design and programming books, rendered as an interactive force-directed graph. It visualizes the relationships between books, their authors, and their associated topics (like usability, web standards, JavaScript, Ruby, and Rails) using `d3.forceSimulation` for physics-based layout and dynamic node positioning. Each book title, URL, and annotation from the original text is embedded as textual nodes and links, with the graph’s structure and labels derived directly from the source gist’s content. The rendering approach uses SVG elements updated via D3’s data join, and while no explicit additional libraries are mentioned, the code relies on standard D3 v4+ APIs for simulation, drag behavior, and tick updates to show the clustered, interlinked reading list.

DDylanFM

65% match

Loading thumbnail…

Gist 752e79ef7b1d634b16a9e7020da164ff

This visualization presents a narrative chart that maps character appearances and introductions across scenes in a story. Using D3.js’s narrative layout, it positions scenes horizontally and characters vertically, encoding each character’s presence as small black ellipses within scene clusters. The code employs mxGraph to render the final graph, with curved edges connecting characters across scenes. Appearance vertices are placed at precise scene coordinates, while introduction labels sit beside the timeline, with links drawn between these points. The underlying data wrangling occurs in a dedicated function that groups scene characters by ID, and the graph is exported as XML via mxCodec.

HHugoberry

65% match

Loading thumbnail…

Gist 9423b215bf16f484a18146a11dcb7d2b

This visualization uses d3.layout.narrative to compute a narrative chart layout from scene-based character co-occurrence data, then renders the result as an interactive mxGraph diagram. It shows character appearances as small circles grouped into rectangular scene clusters, with curved edges linking appearances of the same character across scenes and introduction labels placed to the left. The underlying data wrangling preprocesses raw scene and character JSON into a format for the narrative layout, while mxGraph handles the final drawing. The code also enables curved, arrowless edges and disables user interaction with the graph.

HHugoberry

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

64% match