Cross-Tier Capstone Architecture¶
Specification¶
The full specification below is extracted from Chapter 20: Capstone Design Challenges and Course Wrap-Up.
Type: graph-data-model
**sim-id:** cross-tier-capstone-architecture<br/>
**Library:** vis-network<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how components across two hardware tiers communicate in a cross-tier capstone project, tracing a reading from sensor to final action.
Canvas: 700x400px, responsive via vis-network's `autoResize` option combined with a window resize listener calling `network.redraw()`.
Layout: a left-to-right vis-network graph with four nodes: "Pico Sensor Node" (Tier 1/2 style, indigo `#3F51B5`), "Wi-Fi Link (Pico W)" (raspberry `#C2185B`), "Raspberry Pi 5" (circuit green `#2E7D32`), "Action / Output" (copper gold `#D4AF37`), connected by directional edges labeled "sensor reading" (node 1 to 2), "data over Wi-Fi" (node 2 to 3), "decision" (node 3 to 4).
Controls: a `createSelect()`-equivalent HTML dropdown labeled "Example Project," with two preset options — "Distance sensor to smart alert" and "Sound classifier to NeoPixel signal" — that swap the edge labels and node subtitles to match a concrete example from earlier chapters.
Interaction: clicking any node opens an infobox describing that stage's role in the current example project, plus which earlier chapter introduced the underlying hardware or concept (e.g., clicking "Raspberry Pi 5" references Chapter 16's AI HAT+ inference). Hovering an edge shows its data-type label as a tooltip.
Implementation: vis-network hierarchical left-right layout, node and edge label text swapped via a small JavaScript object keyed by the dropdown's selected example, using `network.setData()` to redraw when the example changes.