Sequence explorer - visualizing meetup attendence

Sequence explorer

This example shows one way to visualize the attendence record of a meetup. The meetup members are split into different groups depending on when they joined the group. The bad guys (no shows) are color coded with red.

The collected data is here and has been processed to the required data format.

Link to sequence explorer on github.

<!DOCTYPE html>
  <meta charset="utf-8"> 
  <head>
    <link rel="stylesheet" type="text/css" href="https://www.ankerst.de/lib/sankeySeqExplorer_10.css">
  
    
    <script src="https://d3js.org/d3.v4.js"></script> 
    <script src="https://www.ankerst.de/lib/sankeyseqexplorer_10.min.js"></script>
    <script src="https://www.ankerst.de/lib/sankeyseq_10.min.js"></script>
    <style>            
      rect.nyresponded_but_did_not_show_up {
         fill: red;
      }       
    </style>
  </head>
  
  <body>
    <script>
    // no parameter when data is embedded in <pre id="data"> tag, otherwise sequenceExplorerChart(file);
    // var myChart = sequenceExplorerChart();
    var myChart = sequenceExplorerChart("meetup_sankey3.csv")
      .showNodeLabels(false)
      .sequenceName("meetup")
      .categoryName("action")
      .categories(["joined meetup group","responded but did not show up","did not respond","responded No","responded and showed up"])
      .sequence(["new member","meetup1","meetup2","meetup3"])
      .valueName("Number of members"); 
      
    d3.select("body")
      .append("div")
      .attr("class", "chart")
      .call(myChart);
      
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v4.js to a secure url

Modified http://www.ankerst.de/lib/sankeySeqExplorer_10.min.js to a secure url

Modified http://www.ankerst.de/lib/sankeySeq_10.min.js to a secure url

https://d3js.org/d3.v4.js

https://www.ankerst.de/lib/sankeySeqExplorer_10.min.js

https://www.ankerst.de/lib/sankeySeq_10.min.js