Sequence explorer - main example (with JSON file)

Sequence explorer

This is the main example showing the features of sequence explorer.

More examples

The example data contains the attendence record of a data visualization meetup in Munich. The group of members who despite responding didn't show up are custom styled and represented by a red rectangle.

The visualization

The small multiples give you an overview over the data waiting to be explored. Each row corresponds to a subset of members based on their time they joined the group:

top row all members
second row all members who joined the group before the first meetup took place
third row all member who joined the group after the first but before the second meetup took place
...

Each column corresponds to a subset of members based on the time of responding to the meetup announcement. This is just based on the forth meetup response reaction. The fourth meetup was announed three weeks before the actual date:

first column all members
second column - early responders: members who RSVP'ed yes more than 2 weeks before the meetup
third column - normal responders: members who RSVP'ed yes later than 2 weeks before but more than 1 week before the meetup
fourth column - very late responders: members who RSVP'ed yes later than 1 week before but more than 3 days before the meetup

The interaction

click on one sankey chart to display it in its original size.
click again to go back
click on the sankey chart at the top left corner (all members - all responders)
click on options from the menu on the left to display addition node information or to animate along selected paths (Note that you have to deselect all paths in order to continue interactive exploration.)
click on the labels at the x- or y-axis to transition to a percentage view

In this example, a subset of events are specified with correspondingEvents([]) resulting in:

The percentage shown in the tooltip is based on just the specified events
clicking on a (event) label on the y axis shows percentages based on the specified events (in this case: no-show rate). The other labels on the y axis are not selectable.
clicking on a sequence label on the x axis displays a stack bar chart with just the specified events. The remaining labels are not included.

<!DOCTYPE html>
  <meta charset="utf-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>
    <style>            
      rect.nyresponded_but_did_not_show_up {
         fill: red;
      }  
    </style>
  </head>
  
  <body>
    <script>
    // setup a chart with a json file and add the visualization to a DOM element
    // var myChart = sequenceExplorer.chart(); // no parameter when data is embedded in <pre id="data"> tag
    var myChart = sequenceExplorer.chart("sankey_1234f.json") // load data from a json file
      .showNodeLabels(false)
      .size([900,600])
      .sequenceName("meetup")
      .eventName("action")
      .eventOrder(["joined meetup group","responded but did not show up","did not respond","responded No","responded and showed up"])
      .correspondingEvents(["responded and showed up","responded but did not show up"])
      .valueName("members")
	  .particleShape("person"); 
      
    d3.select("body")
      .append("div")
      .attr("class", "chart")
      .call(myChart);
      
    </script>
  </body>
</html>

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

https://ee2dev.github.io/libs/sequence-explorer.v20.min.js