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" | |
| }] | |
| } |
