Skip to content

Instantly share code, notes, and snippets.

@EE2dev

EE2dev/cs_new_n2.csv

Last active December 19, 2017 00:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EE2dev/0e709563a63ddfd5c7152e3441593093 to your computer and use it in GitHub Desktop.
Save EE2dev/0e709563a63ddfd5c7152e3441593093 to your computer and use it in GitHub Desktop.
Download ZIP
sequence explorer - small multiples
Raw
readme.md

Sequence explorer

This is an example showing the features of sequence explorer. With .percentages([]) (documentation) you can specify different percentages. It affects the tooltip percentages shown. Also the first element in the array determines the percentages shown when you click on a label of the y axis.

More examples

Link to sequence explorer on github.

  • example data (simulated) contains user click stream data by age and continent. Node info contains information about clients environment (browser, operating system, device)
  • you can zoom in into one chart by clicking on it
  • to go back, click again
  • tooltip of nodes additionally show 4 percentages
Raw
cs_new_n2.csv
value sourceX sourceY targetX targetY region age
100 1st weather 2nd sports United States 18-30
100 1st weather 2nd weather United States 18-30
10 1st weather 2nd health United States 18-30
40 2nd weather 3rd travel United States 18-30
10 1st weather 2nd travel United States 18-30
100 1st health 2nd health United States 18-30
120 1st health 2nd sports United States 18-30
100 2nd weather 3rd weather United States 18-30
10 3rd weather 4th health United States 18-30
90 3rd weather 4th weather United States 18-30
80 2nd weather 3rd sports United States 18-30
70 3rd sports 4th travel United States 18-30
200 2nd sports 3rd sports United States 18-30
150 3rd sports 4th health United States 18-30
100 1st travel 2nd travel United States 18-30
100 1st weather 2nd sports United States 30-50
100 1st weather 2nd weather United States 30-50
10 1st weather 2nd health United States 30-50
10 1st weather 2nd travel United States 30-50
100 1st health 2nd health United States 30-50
120 1st health 2nd sports United States 30-50
100 2nd weather 3rd weather United States 30-50
10 3rd weather 4th health United States 30-50
90 3rd weather 4th weather United States 30-50
200 2nd sports 3rd sports United States 30-50
150 3rd sports 4th health United States 30-50
100 1st travel 2nd travel United States 30-50
100 1st weather 2nd sports United States 50+
100 1st weather 2nd weather United States 50+
10 1st weather 2nd health United States 50+
10 1st weather 2nd travel United States 50+
100 1st health 2nd health United States 50+
120 1st health 2nd sports United States 50+
100 2nd weather 3rd weather United States 50+
10 3rd weather 4th health United States 50+
90 3rd weather 4th weather United States 50+
200 2nd sports 3rd sports United States 50+
150 3rd sports 4th health United States 50+
100 1st travel 2nd travel United States 50+
100 1st weather 2nd sports India 18-30
100 1st weather 2nd weather India 18-30
10 1st weather 2nd health India 18-30
10 1st weather 2nd travel India 18-30
100 1st health 2nd health India 18-30
120 1st health 2nd sports India 18-30
100 2nd weather 3rd weather India 18-30
10 3rd weather 4th health India 18-30
90 3rd weather 4th weather India 18-30
200 2nd sports 3rd sports India 18-30
150 3rd sports 4th health India 18-30
100 1st travel 2nd travel India 18-30
100 1st weather 2nd sports India 30-50
100 1st weather 2nd weather India 30-50
10 1st weather 2nd health India 30-50
10 1st weather 2nd travel India 30-50
100 1st health 2nd health India 30-50
120 1st health 2nd sports India 30-50
100 2nd weather 3rd weather India 30-50
10 3rd weather 4th health India 30-50
90 3rd weather 4th weather India 30-50
200 2nd sports 3rd sports India 30-50
150 3rd sports 4th health India 30-50
100 1st travel 2nd travel India 30-50
100 1st weather 2nd sports India 50+
100 1st weather 2nd weather India 50+
10 1st weather 2nd health India 50+
10 1st weather 2nd travel India 50+
100 1st health 2nd health India 50+
700 1st health 2nd sports India 50+
100 2nd weather 3rd weather India 50+
10 3rd weather 4th health India 50+
90 3rd weather 4th weather India 50+
100 1st weather 2nd sports Germany 18-30
100 1st weather 2nd weather Germany 18-30
10 1st weather 2nd health Germany 18-30
10 1st weather 2nd travel Germany 18-30
100 1st health 2nd health Germany 18-30
120 1st health 2nd sports Germany 18-30
100 2nd weather 3rd weather Germany 18-30
10 3rd weather 4th health Germany 18-30
90 3rd weather 4th weather Germany 18-30
100 1st weather 2nd sports Germany 30-50
100 1st weather 2nd weather Germany 30-50
10 1st weather 2nd health Germany 30-50
10 1st weather 2nd travel Germany 30-50
100 1st health 2nd health Germany 30-50
120 1st health 2nd sports Germany 30-50
100 2nd weather 3rd weather Germany 30-50
10 3rd weather 4th health Germany 30-50
90 3rd weather 4th weather Germany 30-50
200 2nd sports 3rd sports Germany 30-50
150 3rd sports 4th health Germany 30-50
100 1st travel 2nd travel Germany 30-50
100 1st weather 2nd sports Germany 50+
100 1st weather 2nd weather Germany 50+
10 1st weather 2nd health Germany 50+
10 1st weather 2nd travel Germany 50+
100 1st health 2nd health Germany 50+
120 1st health 2nd sports Germany 50+
100 2nd weather 3rd weather Germany 50+
10 3rd weather 4th health Germany 50+
90 3rd weather 4th weather Germany 50+
200 2nd sports 3rd sports Germany 50+
150 3rd sports 4th health Germany 50+
100 1st travel 2nd travel Germany 50+
100 1st weather 2nd sports United Kingdom 18-30
100 1st weather 2nd weather United Kingdom 18-30
10 1st weather 2nd health United Kingdom 18-30
10 1st weather 2nd travel United Kingdom 18-30
100 1st health 2nd health United Kingdom 18-30
120 1st health 2nd sports United Kingdom 18-30
100 2nd weather 3rd weather United Kingdom 18-30
10 3rd weather 4th health United Kingdom 18-30
90 3rd weather 4th weather United Kingdom 18-30
100 1st weather 2nd sports United Kingdom 30-50
120 2nd weather 3rd health United Kingdom 30-50
70 3rd health 4th sports United Kingdom 30-50
100 1st weather 2nd weather United Kingdom 30-50
10 1st weather 2nd health United Kingdom 30-50
10 1st weather 2nd travel United Kingdom 30-50
100 1st health 2nd health United Kingdom 30-50
120 1st health 2nd sports United Kingdom 30-50
100 2nd weather 3rd weather United Kingdom 30-50
10 3rd weather 4th health United Kingdom 30-50
90 3rd weather 4th weather United Kingdom 30-50
100 1st weather 2nd sports United Kingdom 50+
100 1st weather 2nd weather United Kingdom 50+
10 1st weather 2nd health United Kingdom 50+
10 1st weather 2nd travel United Kingdom 50+
100 1st health 2nd health United Kingdom 50+
120 1st health 2nd sports United Kingdom 50+
100 2nd weather 3rd weather United Kingdom 50+
10 3rd weather 4th health United Kingdom 50+
90 3rd weather 4th weather United Kingdom 50+
200 2nd sports 3rd sports United Kingdom 50+
150 3rd sports 4th health United Kingdom 50+
Raw
cs_new_n2_nodes.csv
sourceX sourceY region age browser:Chrome os:Windows client:desktop
1st travel United States 18-30 10 10 90
3rd sports United States 18-30 30 70 50
4th weather United States 18-30 10 10 80
1st health United States 18-30 90 30 160
1st travel India 18-30 10 10 90
3rd sports India 18-30 30 70 50
4th weather India 18-30 10 10 80
1st health India 18-30 90 30 160
1st health Germany 18-30 90 30 160
4th weather Germany 18-30 10 10 80
1st health Germany 18-30 90 30 160
2nd sports India 50+ 160 600 690
1st health India 50+ 400 50 700
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>
</head>
<body>
<script>
var myChart = sequenceExplorer.chart("cs_new_n2.csv") // load data from a csv file
.sequenceName("click in stream")
.eventName("web site directory")
.valueName("number of sessions")
.percentages(["%sameTime","%sameEvent", "%firstEvent", "%prevEvent"]);
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