Visualisations
Visualisations
Interactive visualisations of the Life Itself strategy portfolio.
- Portfolio Map — force-directed network graph, spatial layout showing relationships between items
- Portfolio Indented Tree — hierarchical outline view of the same data
Both draw from the same data (index.js, generated by running node scripts/build-index.js from the repo root, which reads frontmatter from initiatives/, projects/, and ideas/ folders).
Portfolio Map
Visual encoding
Colour = type
| Type | Colour |
|---|---|
| Initiative | Blue #4A90D9 |
| Project | Green #50B86C |
| Idea | Faded yellow #F2D96B |
Opacity = status (how actively something is being worked on)
| Status | Opacity | Icon |
|---|---|---|
| active | 1.0 | — |
| maintenance | 0.7 | ⚙️ |
| paused | 0.25 | ⏸️ |
| archived | 0.15 | 🗄️ |
| idea | 0.55 | — |
Status icons are rendered at full opacity inside the circle so they remain readable against the faded fill.
Size = type
| Type | Radius |
|---|---|
| Initiative | 18px |
| Idea | 15px |
| Project | 11px |
Grouping nodes (category: grouping) — organisational containers that are not real work in themselves (e.g. Comms, Community, Life Itself Courses). Rendered as hollow circles (stroke only, no fill). Excluded from status counts so that "how many things are active?" reflects real initiatives only.
Links connect child items to their parent initiative (arrows point from parent to child).
Interaction
- Drag nodes to reposition
- Scroll to zoom
- Click a node to open its URL
- Hover for tooltip (title, type, status, description, tags)
- Filter panel (top right) toggles visibility by status
Appendix: Deferred encoding ideas
Fill-level / liquid fill — draw each circle with a coloured fill rising from the bottom proportional to vitality (active = full, archived = empty outline). Implemented via SVG clipPath. Intuitive "how full of life is this" read. Would allow a second dimension (e.g. priority) via stroke.
Stroke = status — keep fill for type colour, use border style for status (solid/dashed/dotted). Could combine with fill-level or replace opacity encoding.