End-to-End Computer Science Visualizations
A capstone follows one ordinary input far enough that the boundaries between topics become visible. Instead of stopping after one protocol or one neural-network layer, these lessons keep asking the practical next question: what artifact exists now, which subsystem can consume it, and what still has to happen before a person sees a result?
The browser lesson keeps a typed artifact ledger; the digit lesson follows one prediction packet through a score race, probability tray, routing fork, and delayed truth audit. The consensus lesson separates the client's receipts from the servers' durable logs and application state. Each visual form matches the failure it needs to expose.
What These Capstones Cover
| Lesson | End-to-end question | Breaking point |
|---|---|---|
| URL → Rendered Page | How does an address-bar string become visible pixels? | DNS failure or a refused connection stops the chain before a server response exists. |
| SQL Query → Disk Read | Why can the same query return the same row with fewer storage reads? | A buffer miss requires a page fetch; an absent index key ends the search without a heap request. |
| Handwritten Digit → Prediction | Can a confidence threshold decide which predictions are correct? | Every curated wrong sample clears the 80% gate at 99.26%–99.99% confidence. |
| Message → Distributed Consensus | When can a client know that its write succeeded? | The service commits and applies the command, but a failed response path leaves the client uncertain. |
A Recommended Learning Order
Start with URL → Rendered Page. Its artifacts are concrete: a URL becomes an origin, an origin becomes an IP address, an address unlocks a socket, a secure channel carries a request, and response bytes become DOM, CSSOM, boxes, paint, and pixels. The warm-cache path shows that skipping network work does not skip rendering. The failure paths show exactly where the chain breaks, so “the page did not load” becomes a diagnosis rather than a single symptom.
Continue with SQL Query → Disk Read. Follow a query through parsing, binding, a physical plan, index pages, and a heap tuple. The default executes one plan twice: three storage reads fill the buffer on the first execution, and three buffer hits satisfy the repeat. Compare No index and Missing key to separate the choice of pages from the question of whether those pages are resident.
Then open Handwritten Digit → Prediction. The familiar MLP internals are compressed into one frozen-model station. The new question begins at its output: ten logits race on a fixed scale, softmax gathers them into probability mass, argmax stamps a prediction, and an illustrative 80% policy routes the packet. Held-out truth arrives only afterward. The default correct sample goes to review at 74.84%; every curated misclassified sample auto-accepts above 99%.
Finish with Message → Distributed Consensus. Follow a write over TCP into a leader's log, across a replication link, through majority commitment and application, and back toward the client. The default loses that last response after the write has run. Compare it with No quorum: the same client timeout accompanies a pending write. The distinction is between what happened at the service and what evidence reached the caller.
What to Notice While You Step
- Inputs are not outputs in disguise. A URL is not a page, and a handwritten image is not a semantic class label.
- A page request is not necessarily a storage read. The database buffer can satisfy it from a resident page.
- Each stage has a contract. DNS needs a host, TCP needs an address, softmax needs comparable class scores, and the confidence gate needs a committed top probability.
- A successful intermediate result is not a final verdict. Receiving HTML does not mean the page is rendered; producing a high probability does not mean the prediction is correct.
- Failure location matters. A missing IP, a missing socket, and a wrong auto-accepted prediction demand different explanations even when the user sees only “it failed.”
- A caller's deadline does not mutate remote state. A missing response can hide either a pending command or an applied one.
- The final comparison may live outside the production chain. Browser pixels can be inspected after rendering; a prediction needs held-out truth before anyone can call it correct.
Where These Capstones Sit
These lessons synthesize ideas taught in the focused collections. The URL walkthrough draws directly from DNS resolution, TCP handshake, TLS handshake, and HTTP & HTTPS. The digit walkthrough assumes the mechanics from forward propagation, softmax and cross-entropy, and the live MNIST digit classifier, then hands the result to the threshold logic developed further in Confusion Matrix.
You do not need to finish every prerequisite before opening a capstone. Find the handoff that feels mysterious, then follow its related lesson for the deeper treatment.
The consensus walkthrough draws on TCP handshake, HTTP & HTTPS, state machines, and Raft Consensus. It assumes an elected leader so it can concentrate on the write and its response.
All End-to-End Visualizations
Choose a lesson below, change its inputs, and step through one complete run. The default is curated to reveal the main mechanism; the alternate scenarios expose where that mechanism stops being enough.