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.
xxxxxxxxxx
<meta charset="utf-8"> <!-- also save this file as unicode-8 ! -->
<head>
<link rel="stylesheet" type="text/css" href="https://www.ankerst.de/lib/sankeySeqExplorer_10.css">
<!--script src="../../../lib/d3_v4_2_1/d3.js"></script-->
<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