D3 Circle Packing - Stories and other Interactive Animations

I'm the developer of Xholon, which focuses on inner models and structures. Many Xholon apps also include some graphics. This page links to some apps where d3 circle packing graphics are especially important. The children's stories are ones that I've read to my grandson. They're a good initial testing ground, because they are short and simple. I've started calling them videos, because that's a word my grandson already perks up to.

The Black Geese
The Black Geese
Cinderella
Cinderella
Danny and the Dinosaur
Danny and the Dinosaur
Day in the Life
Day in the Life
Do Re Mi
Do Re Mi
Going to School
Going to School
Harold and the Purple Crayon
Harold and the Purple Crayon
Harold (with purple icons)
Harold (with purple icons)
Peter Rabbit
Peter Rabbit
Peter Rabbit (with speech)
Peter Rabbit (with speech)
Sheila Goes to the Library
Sheila Goes to the Library
The Snowman
The Snowman

The Black Geese app displays a sequence of SVG-based D3 Circle Packing diagrams as the children's story evolves. It's also available as an experimental stand-alone SVG video.

Danny and the Dinosaur is another children's story.

A day in the life of a preschooler, presented as an animated children's story. There's a different routine each day of the week.

Harold and the Purple Crayon is another children's story. Another version uses graphic symbols (icons, an IcoMoon font) rather than letters.

The Tale of Peter Rabbit is another children's story. Peter Rabbit with speech (experimental, Chrome only), and Peter Rabbit with full text from the original Beatrix Potter book, and just the full text and original pictures with speech (experimental, Chrome only).

And of course there's Cinderella. This is a very simple version for young children. It's also available as an experimental stand-alone SVG video.

In Do Re Mi, a xylophone repeatedly moves up and down through a color-coordinated scale. There is no sound yet.

The Snowman is another popular children's story.

You can build your own story using the story template.

Social stories are simple stories that preview some new activity that will happen in the near future. They are primarily intended for children (and others) on the autistic spectrum. To experiment with how I might use Xholon as a tool for implementing social stories, I have written this and this about Going to School. The second is scene-based, where the child moves from scene to scene; use the Click button to step things along.

This is a first test of moving nodes around on the graphic, using a mouse with interact.js .

IcoMoon makes it easy to build symbol fonts. Some early experiments are here, here, and here.

For Xholon apps, which almost always include hierarchical structures, d3 circle packing provides a universal visualization. Any hierarchical structure can be represented this way, so it automatically works with every Xholon app. In theory, the hierarchical structure can be arbitrarily large and it will still all fit on one page. In practice of course, performance decreases as the structure grows in size.

The Life - cells, organism, ecology app is a complex biology simulation with 20,000+ nodes. The page displays a single SVG image that includes all nodes. It use d3 circle packing. Hover above a node to see its full name, and to highlight which other nodes it references and which nodes reference it. Right-click a node to learn more about it. Nodes are nested up to 25 levels deep. Right-click a container node and select Export > d3 > CirclePack to see more detail. I haven't tried animating this app.

Some quick getting-started help, and other info:

  1. The Xholon framework, based on GWT, may take some seconds to start up the first time.
  2. Read about each app in the "notes" tab (often just notes to myself).
  3. Read a transcript of the app's progress by clicking/tapping on the "out" tab. The content is mostly commands and responses in the Avatar interactive-fiction language.
  4. Many apps include a one-line caption above the graphics. Read this to get a rough idea of what's going on in the graphics.
  5. If you hover over a node with a mouse, you will see a tooltip with the name of the node. Each name has a human-readable part and an internal numeric id.
  6. Each node includes a context menu. Some apps support the mouse right click, while others recognize a mouse or touch press. I'm starting to use Hammer.js to support tap and press for mouse and touch devices.
  7. You can also click or tap each node to see the node's name in the "out" tab.
  8. All apps are loaded from gists at github.com.
  9. The Xholon framework source code is available at github.
  10. "Pause" (and unpause) and "Step" each app from "Control" in the context menu.
  11. Most stories have one or more Avatar nodes (for example Peter, the other rabbits, Mr. McGregor, and the mouse in The Tale of Peter Rabbit). Avatars typically follow a script written in an interactive fiction language similar to those used in Inform6 and Inform7. Avatars and other active objects may also have JavaScript behaviors.
  12. You can open a console on any node. Click or tap "Xholon Console" in the context menu. It it's an Avatar node, type "help" and click or tap "Submit".
  13. You can paste new nodes and node subtrees (including new JavaScript and interactive-fiction behaviors) into the app while its running. You can do this through the Xholon Console, or using drag-and-drop from a separate browser or text editor window, or in several other ways.
  14. If you run the app on Chrome, you may be able to use Google's experimental Web Speech API. Some of the apps are already enabled for speech. To turn on speech for an Avatar, open a Xholon Console for it, type "param speech true;", and click or tap Submit. To turn off speech, use "param speech false;". Speech is not yet synchronized with the internal model and graphics. If you set speech to false, it will continue speaking until the speech queue is empty.
  15. Apps use the d3 circle packing layout to create individual SVG images at each timestep of the underlying Xholon model. They use d3 transitions to tween from one SVG image to the next.
  16. The standalone SVG videos include all the d3-generated SVG images, and use d3 for tweening. They do not include the Xholon framework. It's also possible to use TweenLite to do the tweening instead of d3.
  17. My email is hidden in the rectangle of letters at the bottom of this page.
  18. Apps I hope to do in the near future using d3 circle-packing animations include: a full-length novel, a movie script, a baseball game, etc.
  19. Does anyone have a set of SVG images that could be turned into an IcoMoon font for Peter Rabbit (or for another story)? It would be great for the characters to tween through a rich outdoor environment.
  20. Any app whose URL ends with "gui=none" can also be run with a d3 circle-packing GUI. Just change "gui=none" to "gui=d3cp". Or change it to "gui=clsc" for the classic tree GUI. With either of these GUIs, you'll need to find and click/tap the Start button.
  21. You can create your own version of any app using the Xholon workbook editor. See the story template link above, for an example. It uses CodeMirror for editing.
  22. Many Xholon apps, such as The Black Geese on this page, use ports to connect nodes. Instead of drawing lines between nodes, circle-packing visualizations represent port connections by temporarily highlighting the referenced node(s), usually by inverting the fill color. For example, if node A has ports that connect to node B and node C, and if you are hovering over node A, then nodes B and C will be highlighted. Referencing nodes may also be highlighted by inverting the stroke color. This doesn't work very well with The Black Geese, so I'll be implementing some different options, including the option to disable highlighting.
  23. In a Xholon d3-circle-packing visualization, all leaf nodes are the same size. By default, leaf nodes include just one character of text, and non-leaf (container) nodes contain no text. You can optionally specify to show more than one character on leaf nodes (maxChars option), with a reduced font-size. You can also optionally specify to show small text at the top or bottom of containers, or large background text in the center (typically a graphic symbol).
  24. I feel that uniformity of node size when visualizing large hierarchical structures is crucial, if what is most important is the structure and not the values associated with the nodes. This way, you will always see the same graphical layout no matter what you name your nodes, and no matter what language you use. It's a bit like the difference between using variable-length Roman numerals, and modern more-convenient uniform-length Hindu-Arabic numerals.

New work under initial development (February 2015)

In honor of Valentine's Day, I'm using Jane Austen's Pride and Prejudice for my initial experiments in handling a full-length novel. I'm figuring out the various technical challenges as I discover them.

In parallel, I'm working on the movie The Fugitive, initially from a draft screenplay. My biggest challenge is doing a large number of scenes. I think my approach with Pride and Prejudice (PnP) is working out better, so I will probably convert The Fugitive once I have more scenes of PnP completed.

I've made some initial progress with Baseball, parsing some of a sample game from the retrosheet site. They've encoded every North American major-league baseball game ever played into the parsable retrosheet format. In the sample game, Milwaukee and Boston toggle back and forth between offense and defense, batters move between the dugout and on-deck, and the player's name is changed with each new relief pitcher. The big challenge will be in parsing the large number of events as each player comes to bat.

Ken Webb


Xholon GWT is a Xholon project. Copyright (C) 2013 - 2016 Ken Webb

  @QWERTYUIk
  OPASmDFGHe
  primordion
  JKLZcXCVB.