Skip to content

Instantly share code, notes, and snippets.

@EE2dev

EE2dev/.block

Last active February 19, 2019 22:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save EE2dev/25d1162b7d30b443050adbc26598f54f to your computer and use it in GitHub Desktop.
Save EE2dev/25d1162b7d30b443050adbc26598f54f to your computer and use it in GitHub Desktop.
Download ZIP
Sequence explorer - visitor flow
Raw
.block
license: mit
Raw
README.md

Sequence explorer

This example illustrates how to add nodes without paths.

You basically do four things:

  • In your data file (JSON or csv), data is specified as a collection of paths. For the nodes you want free flowing (no path) you create an "artificial" path to a dummy node, with the name " ". So the label on the axis is invisible.

  • with sequenceExplorer.eventOrder([...]) you specify the order of the events along the Y axis. Put your dummy event " " to the top (last element in array)

  • add css to make nodes for the dummy event " " invisible as well as all paths leading to these nodes. (a " " (space) in the event name is substituted to "_" underscore so you can address it with CSS classes.

  • to have a nice scaling of your nodes/paths, you can add a dummy path from the event " " to the event " " which will be invisible. But if the value of the node is the largest overall, the remaining nodes/ paths are scaled accordingly.

Link to sequence explorer on github.

forked from EE2dev's block: Sequence explorer - single chart (with JSON file)

Raw
index.html
<!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>
<style>
rect.ny_{
fill: none;
stroke: none;
}
path.lty_{
stroke: none;
}
</style>
</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([ "C", "B", "A"," "]) // changing the order of the events on the y axis
.sequenceName("visit") // changing the name of the x axis for the tooltip
.percentages(["%sameEvent"]); // adding % of same events to the tooltip
d3.select("body")
.append("div")
.attr("class", "chart")
.call(myChart);
</script>
</body>
</html>
Raw
sequence1.json
{"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": " "
},
{
"value": 100,
"sourceX": 1,
"sourceY": " ",
"targetX": 1,
"targetY": " "
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment