Show user flow in a sankey chart

[adriaandotcom]

Let's say we have this data:

referrer.hostname	referrer.path	hostname	path	country
example.com	/path1	example.com	/path2	NL
example.com	/path1	example.com	/path2	UK
google.com	/search	example.com	/path1	NL
google.com	/search	example.com	/path1	NL
google.com	/search	example.com	/path1	UK
duckduckgo.com	/search	example.com	/path1	NL
(empty)	(empty)	example.com	/path1	NL
(empty)	(empty)	example.com	/path2	NL

Make it like this:

from (5)	percentage	to
google.com	40% (2/5)	/path1 (4)
(direct)	20% (1/5)
duckduckgo.com	20% (1/5)
drop off	40% (2/5)
google.com	20% (1/5)	/path2 (1)

But then with multiple steps:

1. GA (dropoff & inject)	2. clean (only dropoff)	3. clean but boring
	)

I would love to have both dropoff and inject. Like Google Analytics. But screenshot "2. clean (only dropoff)" looks the best.

Mixpanel looks beautiful:

This looks nice as well (in D3):

Data for live example

google.com,/landing1,10
duckduckgo.com,/landing1,1
duckduckgo.com,/landing1,5
google.com,/landing2,1
duckduckgo.com,/landing2,1
duckduckgo.com,/landing2,1
(direct),/landing1,2
others (50+),/landing1,5
others (50+),/landing2,4
/landing2,/path2,2
/landing1,/path2,4
/landing2,/path3,1
/landing1,/path4,3

This seems ideal for landing pages. Howeever, is doesn't work well when you map out all pages. Use the data below:

Data that should be circular

example.com,/path1,400
/path1,/path2,700
google.com,/path1,100
google.com,/path1,100
google.com,/path1,100
duckduckgo.com,/path1,100
(direct),/path1,100
(direct),/path2,100
/path2,path3,100
/path3,/path1,100

The above data example should show circular data from /page3 to /page1:

But it does not.

There are two alternatives that do support circular links:

• https://github.com/tomshanley/d3-sankey-circular/
• https://github.com/ricklupton/d3-sankey-diagram