Interactive visualizations I built to explore how API architectures move data between clients and servers. animated network flows, a live query resolver, and a force-directed schema graph. All vanilla Canvas, zero dependencies.
Animates the same data-fetching task across two architectures. REST fires 3 sequential HTTP requests to separate endpoints. each must complete before the next begins (GET /users → GET /posts → GET /comments). GraphQL sends a single POST /graphql query that resolves all three resources server-side. Packets travel along cubic bezier paths with trail effects. Built with Canvas 2D and a custom state machine.
A recursive descent parser tokenizes the GraphQL query string, extracts field selections and nested sub-queries, then resolves them against an in-memory mock schema. Only the requested fields are returned. demonstrating zero over-fetching. The response is rendered with a character-by-character typewriter effect and JSON syntax highlighting via regex replacements.
A force-directed graph simulation using Coulomb's law (node repulsion) and Hooke's law (edge attraction). Each node represents a GraphQL type with its field list. Drag nodes to rearrange the layout. the physics solver re-converges in real time. Hover to highlight relationship edges. Connections use quadratic bezier curves with animated gradient strokes.
Animates the full lifecycle of an HTTP request: DNS resolution → TCP three-way handshake → TLS negotiation → HTTP request → server processing → HTTP response. Each phase is drawn as a color-coded timing block on a horizontal waterfall chart, with animated progress fills and phase labels. Shows exactly where time is spent in a real-world API call.
Animated bar chart comparing payload sizes between REST (returns full objects with unused fields) and GraphQL (returns exactly what the client requested). Each JSON field is rendered as an individual block. unused fields flash red and fade out, showing the over-fetching waste visually. Canvas 2D with eased transitions.