This example shows how use a single chart sequence explorer.
Link to sequence explorer on github.
The data is obtained (and mapped to the required format) from the sunburst visualization example from Kerry Rodden.
It is easy to see the pros and cons of these two visualizations for this specific data set.
<!DOCTYPE html>
<meta charset="utf-8"> <!-- also save this file as unicode-8 ! -->
<head>
<link rel="stylesheet" type="text/css" href="https://ee2dev.github.io/libs/sankeySeqExplorer.v20.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ee2dev.github.io/libs/sequence-explorer.v20.min.js"></script>
</head>
<body>
<script>
// setup a chart with a json file and add the visualization to a DOM element
// var myChart = sequenceExplorer.chart(); // no parameter when data is embedded in <pre id="data"> tag
var myChart = sequenceExplorer.chart("sequence1.json") // load data from a json file
.eventOrder(["home", "product", "search", "account", "other"]) // changing the order of the events on the y axis
.sequenceName("visit"); // changing the name of the x axis for the tooltip
d3.select("body")
.append("div")
.attr("class", "chart")
.call(myChart);
</script>
</body>
</html>
{"data":[
{
"value": 167538,
"sourceX": 1,
"sourceY": "home",
"targetX": 2,
"targetY": "other"
},
{
"value": 1250384,
"sourceX": 2,
"sourceY": "product",
"targetX": 3,
"targetY": "home"
},
{
"value": 46566,
"sourceX": 3,
"sourceY": "other",
"targetX": 4,
"targetY": "home"
},
{
"value": 476521,
"sourceX": 1,
"sourceY": "other",
"targetX": 2,
"targetY": "product"
},
{
"value": 297120,
"sourceX": 0,
"sourceY": "account",
"targetX": 1,
"targetY": "product"
},
{
"value": 483736,
"sourceX": 3,
"sourceY": "search",
"targetX": 4,
"targetY": "search"
},
{
"value": 847466,
"sourceX": 0,
"sourceY": "home",
"targetX": 1,
"targetY": "other"
},
{
"value": 127881,
"sourceX": 2,
"sourceY": "account",
"targetX": 3,
"targetY": "home"
},
{
"value": 156329,
"sourceX": 2,
"sourceY": "home",
"targetX": 3,
"targetY": "account"
},
{
"value": 40526,
"sourceX": 1,
"sourceY": "other",
"targetX": 2,
"targetY": "search"
},
{
"value": 2518929,
"sourceX": 0,
"sourceY": "home",
"targetX": 1,
"targetY": "home"
},
{
"value": 197984,
"sourceX": 3,
"sourceY": "home",
"targetX": 4,
"targetY": "home"
},
{
"value": 48750,
"sourceX": 3,
"sourceY": "other",
"targetX": 4,
"targetY": "account"
},
{
"value": 1041150,
"sourceX": 0,
"sourceY": "product",
"targetX": 1,
"targetY": "home"
},
{
"value": 172113,
"sourceX": 2,
"sourceY": "search",
"targetX": 3,
"targetY": "account"
},
{
"value": 55659,
"sourceX": 0,
"sourceY": "account",
"targetX": 1,
"targetY": "other"
},
{
"value": 707312,
"sourceX": 1,
"sourceY": "account",
"targetX": 2,
"targetY": "product"
},
{
"value": 537561,
"sourceX": 3,
"sourceY": "product",
"targetX": 4,
"targetY": "account"
},
{
"value": 57117,
"sourceX": 2,
"sourceY": "other",
"targetX": 3,
"targetY": "home"
},
{
"value": 695088,
"sourceX": 1,
"sourceY": "account",
"targetX": 2,
"targetY": "account"
},
{
"value": 1512114,
"sourceX": 2,
"sourceY": "product",
"targetX": 3,
"targetY": "search"
},
{
"value": 416311,
"sourceX": 1,
"sourceY": "search",
"targetX": 2,
"targetY": "account"
},
{
"value": 76858,
"sourceX": 1,
"sourceY": "other",
"targetX": 2,
"targetY": "home"
},
{
"value": 89274,
"sourceX": 2,
"sourceY": "account",
"targetX": 3,
"targetY": "other"
},
{
"value": 62655,
"sourceX": 2,
"sourceY": "search",
"targetX": 3,
"targetY": "home"
},
{
"value": 7553472,
"sourceX": 2,
"sourceY": "product",
"targetX": 3,
"targetY": "product"
},
{
"value": 84607,
"sourceX": 1,
"sourceY": "other",
"targetX": 2,
"targetY": "account"
},
{
"value": 199980,
"sourceX": 1,
"sourceY": "product",
"targetX": 2,
"targetY": "other"
},
{
"value": 889723,
"sourceX": 1,
"sourceY": "product",
"targetX": 2,
"targetY": "search"
},
{
"value": 1418110,
"sourceX": 1,
"sourceY": "home",
"targetX": 2,
"targetY": "product"
},
{
"value": 157908,
"sourceX": 2,
"sourceY": "product",
"targetX": 3,
"targetY": "other"
},
{
"value": 856434,
"sourceX": 2,
"sourceY": "account",
"targetX": 3,
"targetY": "product"
},
{
"value": 1773947,
"sourceX": 1,
"sourceY": "product",
"targetX": 2,
"targetY": "home"
},
{
"value": 1044306,
"sourceX": 3,
"sourceY": "product",
"targetX": 4,
"targetY": "home"
},
{
"value": 768063,
"sourceX": 2,
"sourceY": "account",
"targetX": 3,
"targetY": "account"
},
{
"value": 6828298,
"sourceX": 1,
"sourceY": "product",
"targetX": 2,
"targetY": "product"
},
{
"value": 737449,
"sourceX": 1,
"sourceY": "home",
"targetX": 2,
"targetY": "search"
},
{
"value": 6424145,
"sourceX": 3,
"sourceY": "product",
"targetX": 4,
"targetY": "product"
},
{
"value": 114907,
"sourceX": 1,
"sourceY": "account",
"targetX": 2,
"targetY": "home"
},
{
"value": 138500,
"sourceX": 3,
"sourceY": "product",
"targetX": 4,
"targetY": "other"
},
{
"value": 5465283,
"sourceX": 1,
"sourceY": "search",
"targetX": 2,
"targetY": "product"
},
{
"value": 25107,
"sourceX": 2,
"sourceY": "other",
"targetX": 3,
"targetY": "search"
},
{
"value": 1014015,
"sourceX": 0,
"sourceY": "home",
"targetX": 1,
"targetY": "account"
},
{
"value": 1150183,
"sourceX": 3,
"sourceY": "product",
"targetX": 4,
"targetY": "search"
},
{
"value": 281658,
"sourceX": 2,
"sourceY": "other",
"targetX": 3,
"targetY": "other"
},
{
"value": 196645,
"sourceX": 3,
"sourceY": "other",
"targetX": 4,
"targetY": "other"
},
{
"value": 767855,
"sourceX": 3,
"sourceY": "home",
"targetX": 4,
"targetY": "product"
},
{
"value": 96147,
"sourceX": 1,
"sourceY": "account",
"targetX": 2,
"targetY": "other"
},
{
"value": 1248351,
"sourceX": 1,
"sourceY": "search",
"targetX": 2,
"targetY": "search"
},
{
"value": 317391,
"sourceX": 2,
"sourceY": "other",
"targetX": 3,
"targetY": "product"
},
{
"value": 7756,
"sourceX": 2,
"sourceY": "search",
"targetX": 3,
"targetY": "other"
},
{
"value": 66304,
"sourceX": 3,
"sourceY": "account",
"targetX": 4,
"targetY": "search"
},
{
"value": 77048,
"sourceX": 0,
"sourceY": "account",
"targetX": 1,
"targetY": "home"
},
{
"value": 596098,
"sourceX": 2,
"sourceY": "search",
"targetX": 3,
"targetY": "search"
},
{
"value": 343786,
"sourceX": 3,
"sourceY": "home",
"targetX": 4,
"targetY": "search"
},
{
"value": 5388205,
"sourceX": 0,
"sourceY": "product",
"targetX": 1,
"targetY": "product"
},
{
"value": 753785,
"sourceX": 1,
"sourceY": "product",
"targetX": 2,
"targetY": "account"
},
{
"value": 619041,
"sourceX": 2,
"sourceY": "product",
"targetX": 3,
"targetY": "account"
},
{
"value": 45824,
"sourceX": 0,
"sourceY": "other",
"targetX": 1,
"targetY": "search"
},
{
"value": 86247,
"sourceX": 0,
"sourceY": "product",
"targetX": 1,
"targetY": "search"
},
{
"value": 372027,
"sourceX": 1,
"sourceY": "other",
"targetX": 2,
"targetY": "other"
},
{
"value": 6295,
"sourceX": 3,
"sourceY": "search",
"targetX": 4,
"targetY": "other"
},
{
"value": 190000,
"sourceX": 1,
"sourceY": "home",
"targetX": 2,
"targetY": "account"
},
{
"value": 624734,
"sourceX": 3,
"sourceY": "account",
"targetX": 4,
"targetY": "account"
},
{
"value": 123104,
"sourceX": 0,
"sourceY": "product",
"targetX": 1,
"targetY": "other"
},
{
"value": 95051,
"sourceX": 1,
"sourceY": "search",
"targetX": 2,
"targetY": "home"
},
{
"value": 42317,
"sourceX": 3,
"sourceY": "search",
"targetX": 4,
"targetY": "home"
},
{
"value": 251791,
"sourceX": 0,
"sourceY": "other",
"targetX": 1,
"targetY": "product"
},
{
"value": 319144,
"sourceX": 0,
"sourceY": "account",
"targetX": 1,
"targetY": "account"
},
{
"value": 60100,
"sourceX": 2,
"sourceY": "other",
"targetX": 3,
"targetY": "account"
},
{
"value": 30894,
"sourceX": 0,
"sourceY": "other",
"targetX": 1,
"targetY": "home"
},
{
"value": 7325644,
"sourceX": 0,
"sourceY": "home",
"targetX": 1,
"targetY": "search"
},
{
"value": 1794027,
"sourceX": 3,
"sourceY": "search",
"targetX": 4,
"targetY": "product"
},
{
"value": 65998,
"sourceX": 1,
"sourceY": "account",
"targetX": 2,
"targetY": "search"
},
{
"value": 2014254,
"sourceX": 2,
"sourceY": "search",
"targetX": 3,
"targetY": "product"
},
{
"value": 12879,
"sourceX": 1,
"sourceY": "search",
"targetX": 2,
"targetY": "other"
},
{
"value": 8550120,
"sourceX": 0,
"sourceY": "home",
"targetX": 1,
"targetY": "product"
},
{
"value": 357548,
"sourceX": 2,
"sourceY": "home",
"targetX": 3,
"targetY": "search"
},
{
"value": 77078,
"sourceX": 2,
"sourceY": "home",
"targetX": 3,
"targetY": "other"
},
{
"value": 110571,
"sourceX": 3,
"sourceY": "home",
"targetX": 4,
"targetY": "account"
},
{
"value": 229635,
"sourceX": 3,
"sourceY": "other",
"targetX": 4,
"targetY": "product"
},
{
"value": 563835,
"sourceX": 0,
"sourceY": "product",
"targetX": 1,
"targetY": "account"
},
{
"value": 1249792,
"sourceX": 2,
"sourceY": "home",
"targetX": 3,
"targetY": "product"
},
{
"value": 23569,
"sourceX": 0,
"sourceY": "other",
"targetX": 1,
"targetY": "account"
},
{
"value": 78782,
"sourceX": 2,
"sourceY": "account",
"targetX": 3,
"targetY": "search"
},
{
"value": 19209,
"sourceX": 3,
"sourceY": "other",
"targetX": 4,
"targetY": "search"
},
{
"value": 75482,
"sourceX": 3,
"sourceY": "account",
"targetX": 4,
"targetY": "other"
},
{
"value": 52717,
"sourceX": 3,
"sourceY": "home",
"targetX": 4,
"targetY": "other"
},
{
"value": 286618,
"sourceX": 2,
"sourceY": "home",
"targetX": 3,
"targetY": "home"
},
{
"value": 139294,
"sourceX": 3,
"sourceY": "search",
"targetX": 4,
"targetY": "account"
},
{
"value": 106926,
"sourceX": 3,
"sourceY": "account",
"targetX": 4,
"targetY": "home"
},
{
"value": 521630,
"sourceX": 1,
"sourceY": "home",
"targetX": 2,
"targetY": "home"
},
{
"value": 151754,
"sourceX": 0,
"sourceY": "other",
"targetX": 1,
"targetY": "other"
},
{
"value": 69030,
"sourceX": 0,
"sourceY": "account",
"targetX": 1,
"targetY": "search"
},
{
"value": 734055,
"sourceX": 3,
"sourceY": "account",
"targetX": 4,
"targetY": "product"
}]
}