Storage Speed Comparison¶
Specification¶
The full specification below is extracted from Chapter 14: Raspberry Pi 5 Hardware: Storage, Camera, and Cooling.
Type: chart
**sim-id:** storage-speed-comparison<br/>
**Library:** Chart.js<br/>
**Status:** Specified
Learning objective: Students will *compare* (Bloom L4: Analyze) the read and write speeds of microSD, USB 3.0, and NVMe storage on a Raspberry Pi 5 across different workload types.
Chart type: grouped bar chart, responsive Chart.js canvas that resizes to its container width.
Purpose: show how the speed gap between microSD, USB 3.0, and NVMe storage changes depending on the kind of workload — sequential reads (like loading one large video file), random reads (like loading thousands of small model files), and boot time.
X-axis: three workload categories — "Sequential Read," "Random Read (small files)," "Boot Time (seconds, lower is better)."
Y-axis: relative performance score (0-100), except the "Boot Time" category which uses seconds directly with its own scale noted in the tooltip.
Data series: three bars per category, one each for MicroSD Storage (gray), USB 3.0 (indigo `#3F51B5`), and NVMe Storage (circuit green `#2E7D32`), using representative values that show NVMe leading substantially on random reads (where the gap is largest) and a smaller relative gap on sequential reads.
Interaction (required): a `<select>` control above the chart lets students switch the workload emphasis between "Everyday Use" and "AI Vision Project" presets, which re-renders the bar heights to reflect that random-access-heavy AI workloads benefit most from NVMe. Hovering any bar shows an exact tooltip value and a one-sentence explanation of what that workload represents, pulled from the chapter's storage table.
Implementation: Chart.js bar chart with `responsive: true` and `maintainAspectRatio: false` inside a fixed-height wrapper `div`. Store the two presets as separate data arrays and swap the chart's dataset on the `<select>`'s `change` event, then call `chart.update()`.