journey-map
Customer Journey Map Builder
Build interactive, data-rich customer journey maps as standalone HTML files powered by D3.js. Journey maps visualize the end-to-end experience of a user persona across phases of their relationship with a product — capturing not just what they do, but how they feel, what they need, and where the opportunities are.
What Makes a Journey Map Different from a Flow Diagram
A flow diagram maps screens, clicks, and navigation paths — it's about the system. A journey map maps the human experience across time — it's about the person. Journey maps include emotional states, unmet needs, pain points, and opportunities alongside the functional steps. They're organized as a grid/table (phases × dimensions) rather than a node-and-arrow graph.
Architecture
Every journey map is a single .html file with D3.js loaded from CDN. No build step, no npm — just open in a browser or serve via npx serve.
The map renders as a structured table/grid with:
- Columns = journey phases (horizontal axis, left to right)
- Rows = journey dimensions (vertical axis, stacked)
- Emotion curve = an SVG line chart overlaid across phases