Porter Value Chain with IS Overlay¶
Scaffold
This MicroSim has been scaffolded from its specification. The interactive implementation has not been built yet.
Learning Objective¶
TBD
- Bloom Level: TBD
- Bloom Verb: TBD
- Library: p5.js
Preview¶
Specification¶
The full specification below is extracted from Chapter 2: The Role of IS in Organizations.
Type: interactive-infographic
**sim-id:** porter-value-chain<br/>
**Library:** p5.js<br/>
**Status:** Specified
A horizontal arrow-shaped value chain diagram drawn in p5.js, drawn responsively to fill the available iframe width. The arrow body is divided left-to-right into five **primary activity** segments labeled (in order): Inbound Logistics, Operations, Outbound Logistics, Marketing and Sales, Service. Above the arrow body sits a stacked bar of four **support activity** segments labeled: Firm Infrastructure, Human Resource Management, Technology Development, Procurement. The whole shape resembles a chevron pointing right with a roof.
Color palette (light mode): primary activities use a graduated teal-to-emerald-green ramp (left to right). Support activities use a soft slate-gray with one accent (Technology Development) highlighted in a brighter green to emphasize where IS lives natively. Each segment has a 1px darker border and white label text centered.
Interactivity: when the user hovers over (or taps) any segment, a callout panel appears below the chain showing (a) the activity name, (b) one or two example IS systems that operate there (e.g., for Operations: "ERP, MES, predictive maintenance"), and (c) one example metric IS would move (e.g., "throughput per shift" or "first-call resolution"). A small toggle lets the user switch between three industry presets — manufacturing, retail bank, hospital — so the example systems and metrics change to fit the industry while the value-chain structure stays the same.
Layout: the value chain spans the full canvas width; the callout panel sits below at narrow widths and to the right at wide widths. Canvas resizes on window resize. The setup() function calls updateCanvasSize() as its first step. Canvas parented with `canvas.parent(document.querySelector('main'));`.
Learning objective (Bloom: Applying): Given a real organization, students can place an IS investment proposal into the correct value-chain segment and articulate the metric it should move.
Implementation: p5.js, single `main.html`, accompanying `index.md` doc, deployed at `/sims/porter-value-chain/`.