Skip to content

Instantly share code, notes, and snippets.

@EE2dev

EE2dev/index.html

Last active December 18, 2017 23:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EE2dev/b9a20ef36c2a3caf5d7b0374a2d677a7 to your computer and use it in GitHub Desktop.
Save EE2dev/b9a20ef36c2a3caf5d7b0374a2d677a7 to your computer and use it in GitHub Desktop.
Download ZIP
sequence explorer - highlight a vertical path
Raw
readme.md

Sequence explorer

This example shows how display a vertical path and how to highlight this path with css styling.

More examples

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.

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>
path.lsx0.lsyhome.ltx1.ltyaccount,
path.lsx1.lsyaccount.ltx1.ltysearch,
path.lsx1.lsysearch.ltx2.ltyproduct,
path.lsx2.lsyproduct.ltx3.ltysearch,
path.lsx3.lsysearch.ltx4.ltyproduct {
stroke: orange;
stroke-opacity: .5;
}
rect.nx0.nyhome, rect.nx1.nyaccount, rect.nx1.nysearch, rect.nx2.nyproduct,
rect.nx3.nysearch, rect.nx4.nyproduct {
fill: orange;
}
</style>
</head>
<body>
<script>
var myChart = sequenceExplorer.chart("sequence1wblink.csv") // load data from a csv file
.eventOrder(["home", "product", "search", "account", "other"])
.sequenceName("visit");
d3.select("body")
.append("div")
.attr("class", "chart")
.call(myChart);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment