State transition explorer: Instructions

Try the following:
  1. Click on a coloured circle to select that state.
  2. Click on the green text of a transition to select that link.
  3. Press B or check "Back Links" to show links leading to the current state
  4. Press "N" to select a link at random
  5. Wave the mouse over the controls to see hints about what that control does.
Less useful controls:
  1. Turn off "Hide unrelated" to show _all_ links (must have Forward and Back links turned on).
  2. Type a regular expression into the filter box to filter which links are displayed.
  3. Press P to traverse back through the history of moves
  4. Press R to select a random state.
  5. The Trim checkbox will keep the history short, and "Brief" hides the descriptive text.
Secret controls: Click "Brief" and then click on the bold N to generate a long list of transitions!

How it works

Most of the work is done by the marvellous d3js library.

The diagrams are loaded from Tab-Separated-Value files containing at least three columns: Start, Move, and End.

Start is the starting state of a transition.
Move is some text describing the transition.
End is the final state of the transition.

You can also have a Description column giving some extra information about the transition, that will appear as hovertext and in the move history.