Skip to main content
100%

Fork of D3 Starter

✓ Published0🌍 Public
Ccharlottekcox@gmail.com
Last edited Oct 22, 2025
Created on Oct 22, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes