block by EE2dev 0e709563a63ddfd5c7152e3441593093

sequence explorer - small multiples

Full Screen

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.

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>

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+

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