This example shows one way to visualize the attendence record of a meetup with some member information. 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.min.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_sankey_11.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(["before meetup1","meetup1","meetup2","meetup3"])
.valueName("members");
d3.select("body")
.append("div")
.attr("class", "chart")
.call(myChart);
</script>
</body>
</html>
Modified http://d3js.org/d3.v4.min.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.min.js
https://www.ankerst.de/lib/sankeySeqExplorer_10.min.js
https://www.ankerst.de/lib/sankeySeq_10.min.js