Portfolio

Interactive visualisations of the Life Itself strategy portfolio — force-directed map and indented tree, both drawing from the same markdown data source.

Visualisations

Portfolio Map →

Force-directed network graph. Spatial layout showing relationships between items.

Portfolio Tree →

Hierarchical outline view of the same data.

Both draw from index.js, generated by scripts/build-index.js from frontmatter in initiatives/ and projects/.

Plan of Work

See PLAN.md for the full plan, open questions, and task list.

Current focus (April 2026): strategic planning + ideas pipeline for the team strategy session. Key questions: what are we actively working on? What's live vs still an idea?

Still missing: owner field on active initiatives — you can see what is active but not who is carrying it.

Building the data index

# One-time setup
cd portfolio/scripts && npm install

# Rebuild manually (also runs automatically on commit)
node portfolio/scripts/build-index.js

The pre-commit hook rebuilds portfolio/index.js automatically when any initiatives/*.md or projects/*.md file is staged.

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 local site page
In the tree view, use the View link on a row to open its local site page
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.