Demo #3 — Hill Chart Embed (Ghost + Cloudflare Worker + D1)
I like Hill Charts because they capture a reality that regular task boards miss: progress is not linear, and uncertainty is part of the work.
So I built a lightweight Hill Chart embed I can drop directly into a Ghost post and update over time.
This demo walks through how it works end-to-end: chart rendering, edit controls, persistence, and the backend flow.
What it does
At a high level, this project gives me an embeddable Hill Chart with two modes:
- Read-only mode (default) for viewers
- Edit mode for authorized updates
Core behaviors shown in the demo:
- Render a Hill Chart directly inside a Ghost page
- Show labeled points on the curve (e.g., in discovery vs execution)
- Keep the chart locked by default
- Unlock editing with a password flow
- Save updates so changes persist on refresh/reload
Walkthrough of the demo
1) Embedded chart inside Ghost preview
The chart is embedded directly in the post page and renders as SVG.
It includes:
- A title
- The classic hill shape
- Horizontal framing (“Figuring things out” → “Making things happen”)
- Labeled points positioned along the curve
2) Read-only by default
The default state is intentionally safe for public pages:
- Viewers can see progress
- No edits happen accidentally
- UI clearly indicates the chart is locked/read-only
3) Unlock flow for editing
When I click Edit, the app prompts for a password.
After successful auth, editing becomes available and I can update the chart data.
4) Persisted updates
After unlock, edits are saved through the backend and survive refresh/reload.
That means the chart behaves like a real project artifact, not just a static graphic.
How it works (architecture)
The implementation has four main pieces:
Viewer Browser
- Loads the Ghost page
- Executes the embed snippet
- Defaults to read-only behavior
Embed Script
- Renders the chart as SVG
- Fetches chart data from an API
- Uses local token state only after successful unlock/auth
Cloudflare Worker (API layer)
- Serves chart reads
- Handles authenticated updates
- Handles password auth endpoint
Cloudflare D1 (SQLite)
- Stores chart configuration and point data
- Keeps persistence simple and lightweight
In short: Ghost handles publishing, the embed handles rendering/interaction, Worker handles API + auth, and D1 handles durable storage.
Security model
A few design choices matter here:
- Public embeds are read-only by default
- Editing requires explicit password auth
- Chart data stays server-side
- Password is not exposed in the public embed snippet
- Update calls require authenticated flow/token
This keeps the publishing flow easy while still protecting edits.
Why I built this
I wanted something between a screenshot and a full PM platform:
- Faster than making diagrams manually each update
- More honest than linear status bars
- Easier to share than internal-only tooling
- Native to my own site/workflow (Ghost + embed)
For projects with ambiguity, this format makes progress legible without pretending the path is straight.
What’s next
A few improvements I’m considering:
- Better in-browser point editing UX (drag/drop + inline label editing)
- Multi-chart management (instead of one-off embeds)
- Version history / change log per chart
- Team-friendly sharing + permissions
- Optional export as image for reports/slides
If you want a visual progress view that captures both unknowns and execution, Hill Charts are a great format—and this build is my attempt to make them practical for everyday publishing.