Skip to content

Instantly share code, notes, and snippets.

@EE2dev
Last active February 20, 2019 23:24
Show Gist options
  • Save EE2dev/85dd400deacec9f63cfd816c080d12d1 to your computer and use it in GitHub Desktop.
Save EE2dev/85dd400deacec9f63cfd816c080d12d1 to your computer and use it in GitHub Desktop.
Sequence explorer - visitor flow (2)
license: mit

Sequence explorer

This example illustrates how to add nodes without paths.

forked from EE2dev's block: Sequence explorer - visitor flow

Changes to the forked version above:

  • to have a nice scaling of your nodes/paths, you can use sequenceExplorer.chart().nodePadding() instead of creating a dummy path from the event " " to the event " ".

  • the sequence elements are and should be strings not numbers.

  • colored one specific node with CSS

  • to refer to a meaningful denominator for the percentages, specify sequenceExplorer.chart().correspondingEvents([]) the related events. (in this case exclude the dummy events)

  • to add people icons flowing through certain paths, simply add the corresponding paths to the data with a name and call sequenceExplorer.chart().particleShape("person")

  • percentages are set to "%sameEvent". Change the percentage to the metric most useful for your application.

Link to sequence explorer on github.

<!DOCTYPE html>
<meta charset="utf-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.js"></script>
<style>
rect.ny_{
fill: none;
stroke: none;
}
rect.nx2.nyA{
fill: darkorange;
}
path.lty_{
stroke: none;
}
</style>
</head>
<body>
<script>
var myChart = sequenceExplorer.chart("sequence1.json") // load data from a json file
.nodePadding(50) // scaling the nodes/ paths
.eventOrder([ "C", "B", "A"," "]) // changing the order of the events on the y
.correspondingEvents(["C", "B", "A"]) //specifies a subset of events which form a unit. An array with a subset of events reduces the percentages shown for a point in time
.eventName("visitor group") // changing the name of the y axis for the tooltip
.sequenceName("touchpoint") // changing the name of the x axis for the tooltip
.percentages(["%sameEvent"]) // adding % of same events to the tooltip
.particleMax(0.1) // determining the maximum number of particles (persons)
.particleShape("person"); // changes the particle icon
d3.select("body")
.append("div")
.attr("class", "chart")
.call(myChart);
</script>
</body>
</html>
{"data":[
{
"value": 30,
"sourceX": "1",
"sourceY": "B",
"targetX": "2",
"targetY": "A"
},
{
"value": 40,
"sourceX": "1",
"sourceY": "C",
"targetX": "2",
"targetY": "B"
},
{
"value": 40,
"sourceX": "2",
"sourceY": "B",
"targetX": "3",
"targetY": "A"
},
{
"value": 30,
"sourceX": "2",
"sourceY": "A",
"targetX": "3",
"targetY": "C"
},
{
"value": 30,
"sourceX": "1",
"sourceY": "A",
"targetX": "2",
"targetY": " "
},
{
"value": 30,
"sourceX": "2",
"sourceY": "C",
"targetX": "3",
"targetY": " "
},
{
"value": 30,
"sourceX": "3",
"sourceY": "B",
"targetX": "3",
"targetY": " "
}
],
"paths":[
{
"value": 30,
"sourceX": "1",
"sourceY": "B",
"targetX": "2",
"targetY": "A",
"name": "B vistors"
},
{
"value": 30,
"sourceX": "2",
"sourceY": "A",
"targetX": "3",
"targetY": "C",
"name": "B vistors"
},
{
"value": 30,
"sourceX": "1",
"sourceY": "C",
"targetX": "2",
"targetY": "B",
"name": "C vistors"
},
{
"value": 30,
"sourceX": "2",
"sourceY": "B",
"targetX": "3",
"targetY": "A",
"name": "C vistors"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment