00:00
19
More
See all Show me
i've been looking through choose your own adventure books lately, viewing them as graphs of nodes for pages and edges for choices. to help debug whether i was walking though the trees properly i built a force-directed graph viewer using a small physics library.

this is a graph from one of the books that's currently rendering properly. the starting page is drawn as a dark grey dot and pages which involve a choice are light grey. ending pages are color-coded based on the relative goodness of that ending. unfavorable outcomes are red, mediocre ones are yellow and the ‘best’ endings are blue. line-thickness shows, out of the set of all possible readings of the book, how many took a particular path.

since it's difficult to find an optimal layout for graphs with this many nodes, they're being modeled as points in a particle system. by having each node slightly repel every other node, but remain tied together through the edges, the graph is usually able to untangle itself after a little while. here the nodes are randomly positioned at the first frame, then the system is allowed to percolate until it settles down.

Likes

  • Cloudeeo plus 4 months ago
    Christian, how to add an href to a node to open a page with target of _blank in arbor.js?
  •  
This conversation is missing your voice. Take five seconds to join Vimeo or log in.

Advertisement

About this video

MP4
00:00:19
  • 640x432, 1.33MB
  • Uploaded Sat August 29, 2009
  • Please join or log in to download

Statistics

Date Plays Comments
Totals 572 9 1
Feb 14th 1 0 0
Feb 13th 0 0 0
Feb 12th 2 0 0
Feb 11th 0 0 0
Feb 10th 1 0 0
Feb 9th 0 0 0
Feb 8th 2 0 0