These graphs represent the connections between distinct turn states of two different levels of a game. Arrows connect states reachable by one move. Each state may lead to at most 3 other states, but can be reached by an arbitrary number of other states. Dark arrows connect to new states (efficient moves), while light arrows connect to previously enumerated states (inefficient moves). The states are enumerated by the number and sequence of moves required to reach each game state, e.g. a state that takes 5 moves to reach will always be clockwise from a state that takes 2 moves to reach. The most efficient sequence of moves leading to a particular state is highlighted in red on mouse-over.
Each graph is generated using JavaScript, D3, and SVG based on a JavaScript object containing game state data for its respective level. Additional visualizations based on the source of this dataset include a manually generated tree graph (including failure states not visualized here), an interactive, procedurally generated tree graph (source), 2d graphs of the directional separation between states, and a more concrete representation of one level using Plotly's 3D scatter plot.
Source Code (data objects)
Source Code (D3 plot)
Tools used: D3, JavaScript, SVG, HTML