Gist 5578815

100%

✓ Published0🌍 Public

Last edited May 14, 2013

Created on May 14, 2013

A comic-strip conversation between animated characters, built with the CMX library, uses a `scene` and `actor` elements with `pose` attributes to create a sequence of panels. The scene shows one happy day with a character telling teammates about a present, while a later scene reacts to a build server’s report of 187 compilation errors. Speech bubbles are defined via `bubble` elements containing `tspan` text. The data is hardcoded within the `index.html` file, using CMX’s scene and actor APIs to drive the animation.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 7306870

This example shows a short comic-style argument between two stick figures, each accusing the other of being mafia, with the first speaker’s line rendered in orange via a CSS override. It uses the CMX library (cmx.js and cmx.css) to define scenes, actors, bubbles, and drawings through declarative SVG-like markup, with `pose` attributes specifying limb and bubble shapes. A green slanted line and the text “Strongest argument ever” add a punchline, while transform attributes position and rotate elements. No external data or dynamic computation is involved; the visualization is fully static and defined inline.

RRestuta

75% match

Loading thumbnail…

Half as Russian http://cmx.io/#1b7f32cd476d819bc8ae

Two stick figures discuss the ambiguity of the Russian phrase "half as Russian"—meaning both "half as much" and "half as tall"—using a series of speech bubbles. The static comic strip, defined in a single HTML file, is rendered by the cmx.io library (loads `cmx.css` and `cmx.js`), which interprets handwritten `scene`, `actor`, and `bubble` elements with pose and translation attributes to draw the characters and text.

RRestuta

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

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

60% match

Loading thumbnail…

Gist e0d36dea72b5cd332eef9e4265715ff9

This generative sketch displays a cartoon face rendered through layered procedural drawing commands, with a wall of overlapping code text scrolling horizontally in the background. The sketch uses the Processing.js (p5.js) API to draw shapes like ellipses, arcs, triangles, and rectangles, while the foreground text repeatedly includes the literal substrings “ITPIsAwesomeWeLoveCodingtrain” and “Codingsohard,” suggesting a playful commentary on learning to code. The face alternates between static and animated states, with randomized cheek positions and a frame rate change, all triggered by a variable that switches between two drawing branches. The code also manipulates a global offset variable to create the continuous text slide.

CChelseaChenC

58% match

Loading thumbnail…

Bubble Testing

This example visualizes character dialogue data as a force-directed bubble chart, where each circle represents a character and its size encodes total word count via `d3.scaleSqrt`. A toggle switch in the top-left corner filters the circles by sex, splitting them into two clusters or merging them back together by changing the force’s x-position. The code uses `d3.forceSimulation`, `d3.forceX`, `d3.forceCollide`, and `d3.csv` to load the data, with an animated SVG background circle loaded via `d3.xml`.

NNicholasARossi

56% match

Loading thumbnail…

Creating a scene

The example shows an animated smiley face created with D3.js, where the eyebrows move up and down in a looping motion. The face is built using SVG shapes, including circles for the eyes and an arc for the mouth, all centered within an SVG canvas. The code uses D3’s `select` and `arc` functions, along with chained `transition().duration()` calls to animate the eyebrow positions. A separate HTML scene displays a natural landscape with CSS-animated animals, including a cat, dog, bird, and butterfly, each moving via keyframes. The rendering relies on static image assets for the animals and flowers, while the D3 portion handles the dynamic facial animation.

Vvanamsreecharan05@gmail.com

55% match

Loading thumbnail…

Fork of Fork of smiley

This example renders a cheerful, cartoon-style smiley face character using HTML and CSS, built with a plain `<div>`-based structure and styled through the `index.css` stylesheet. The scene depicts a white circular head with blue cap, brown ears and hands, black eyes and eyebrows, a red nose, and a curved mouth, all set against a light blue sky-like background. Positioning relies on absolute and relative coordinates, while shape is created using `border-radius` and CSS transforms for angled elements like the eyebrows and hands. No JavaScript or external libraries are used; the visualization is purely static.

KKusumaKumariDama@my.unt.edu

55% match