I am hoping to visualize the path that a user takes through many steps to get from start to finish in various processes.
Some of these steps are shared, so I want to show that different paths all cross the same nodes at one point.
At first I thought a Sankey Diagram would be a good fit for this, but after some experimentation I realized that you can’t actually follow a path from start to finish, as each intermediate node aggregates the inputs and the outputs are only concerned with the next step.
Here’s an example to visualize the issue I’m having:
If you look at this diagram, what I am losing is the ability to follow, for example, “E Journey” all the way to the end (which is “B Destination” in our data).
I realize it’s the nature of a Sankey diagram to aggregate, so I’m wondering if anyone can recommend or suggest a different kind of visualization to accomplish what we’re looking to do?
So in essence it would be following a journey through a certain number of steps, but being able to stick with that journey to the end.
The size of the nodes will also matter, as they will represent the number of users following that journey.
Are these individual user journeys? If so then I would consider a flowchart with multiple sets of edges between nodes (each edge can have its own color and label).
If however a user can visit one node/step multiple times then you may have to compromise and consider which aspects/insights are most relevant to you.
They are journeys yes (and a user shouldn’t have to repeat steps), but I was hoping to avoid a flowchart simply because it’s hard to represent the population size for each journey in an intuitive way…
The size and complexity of the journeys is really what we are trying to convey here…
I guess I could play with the thickness of the edge lines… It just felt like the Sankey was 80% of the way there with how everything is represented.
Yes, although DOT is technically the language, and dot`` a template tag function provided by Framework that wraps the library viz.js (which in turn makes Graphviz available to browsers).
I’ve been looking for similar solutions, but haven’t found an exact fit either. The closest was this one, which you need to supply the color.
I needed to do most of the pre-processing in js to keep track of which number of ‘users’ per flow group converted and subtract them out to include them in a new row with the highlight color
Mermaid also has a number of great tools, but nothing like the Sankey chart! I sometimes use that instead of dot when I have more complex requirements.
The closest was this one, which you need to supply the color.
Thank you for sharing this! That’s actually one of the things I’m trying to solve for, is tracing a path from start to finish through any number of nodes.
I wonder if I could combine some of this with a typical Sankey, maybe with some on-hover highlighting…
