If you make a pretty graph using this tool and can share a screen shot for my gallery, please do!
The general skeleton for Dagre comes from Gansner, et al., "A Technique for Drawing Directed Graphs", which gives both an excellent high level overview of the phases involved in layered drawing as well as diving into the details and problems of each of the phases. Besides the basic skeleton, we specifically used the technique described in the paper to produce an acyclic graph, and we use the network simplex algorithm for ranking. If there is one paper to start with when learning about layered graph drawing, this is it!
This tool was developed on the Google Chrome web browser. I don't really know if it will work in other browsers. It looks best on a screen at least 1600 pixels wide.
You can use the mouse wheel to zoom in and out, you can drag the entire graph, and you can hover/mouseover the edges/paths for detail.
You can view the frequency of backtracks (user returned to a previous page from this page), and exits (last page in the session) using the toggle at the bottom. Backtracks are shown by default. You can hover/mouseover the nodes for detail.
You can use the "csv" query parameter to pass the URL to a csv file (i.e. https://www.bigdatamark.com/clickstream_analysis.html?csv=https://www.bigdatamark.com/wp-content/uploads/clickstream_data.csv). Although you can specify a local file path, it will result in a CORS permission error if you don't have web security disabled in Chrome.
The data file must be in CSV format with a heading row. The file can be described as a transition graph of pages visited (in order) separated by the greater than sign (>). Additionally, there are two meta data columns. The "platform" column and the "value" column. The value column is just the frequency where that exact journey was taken.
I optionally allow the use of a pipe symbol (|) if there is a break in the transition. I mostly use this to simplify the user's journey. If they backtrack, I will filter out their visit to the same page, and resume the journey with a pipe symbol.
This file also works really well in Excel with a pivot table, especially if you add an additional column where you copy the first pagename to it's own "entrypage" column.
platform,clickstream,value desktop,home>products>product 1|products>product 2|products>product 3,60
You can easily add bounces (single page visits) to this by just automatically coding a second page named something like "bounce" or "exit". In my demo, I'm using "bounce".
v1.3 : 2020-03-06
v1.2 : 2020-03-04
v1.1 : 2020-03-02
v1.0 : 2020-02-27