Visual clickstream analysis with Dagre

If you make a pretty graph using this tool and can share a screen shot for my gallery, please do!

Dagre is a javascript library for graphing. From their documentation:

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!

Using this tool

All analysis is done on the JavaScript client side. There is no server side work, so no one is seeing your data. While uploading files works great, specifying the URL to a CSV file requires CORS permission on the web server hosting the file. Please contact your IT department for help. Alternatively, you can disable CORS permission requirements on Chrome using the "--disable-web-security" command line flag when executing/starting chrome.

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.

Data Format

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".

desktop,home>bounce,25
mobile,home>bounce,18
                

Notes

• By default, the width of edges/paths in the graph are ranked by frequency and are not to proportion. Proportion wasn't meaningful in most cases because one transition in the graph had a frequency that was 100 orders of magnitude higher than its nearest neighbor. You can change this from "Rank" to "Ratio" in the toolbar.
• I'm using "longest path" so that journey end pages will generally line up on the right.

To-do

• Having a date column and picker goes against the intended use of this but I will support a tags columns to support feature tagging (i.e. "redesign a", "off season", "peak season").

Release Notes

v1.3 : 2020-03-06

• Support a query parameter to specify the URL of a csv file to load.
• Fixed node tooltips to show undefined values as 0.
• Moved tooltips down on the y axis. They were too high up.

v1.2 : 2020-03-04

• Have a toggle for ratio/rank for edge/path width display.
• Fixed ranked edge/path widge display (was doing a dense rank).
• Style improvements to toolbar and help button.

v1.1 : 2020-03-02

• Since we know where a user backtracked, we can scale the node color based on the frequency of these actions on that page.
• Since we have the exit page data, we should be able to scale the node color based on the frequency of exits on that page.
• Added documentation on supporting bounces.

v1.0 : 2020-02-27

• Initial release.