Fork of D3 Starter
This D3.js example visualizes a finite state machine (FSM) that recognizes words beginning with "C," such as "Cat," "Car," and "Carton." The SVG renderer displays states as labeled nodes connected by directed edges, with transitions labeled by input characters, and highlighting accepting states. The layout positions nodes horizontally by progression through the state sequence, with vertical offsets for branching paths. Users can drag nodes to reposition them, and the graph supports zoom interactions, implemented through D3's `d3.zoom` and `d3.drag` APIs. The code manually defines the state and transition data, then uses standard D3 SVG selection and mapping to render the diagram.