Sequence explorer - main demo
This sequence explorer demonstrates how small multiples of Sankey diagrams reveal attendance patterns at a Munich data-visualization meetup. Rows split members by join time relative to meetups; columns split them by response timing. The tool uses D3 v4 and the sequence-explorer library to support interactions: click a chart to enlarge, click axis labels to toggle percentage views, and use the menu to animate paths or show node details. A subset of events, "responded and showed up" and "responded but did not show up," are designated as correspondingEvents, so tooltips, y-axis labels, and x-axis stacked bar charts are filtered to only those outcomes, with no-shows highlighted in red. This demonstrates the library's flexibility in focusing on specific event sequences.
AI-generated descriptionSequence explorer
This is the main example showing the features of sequence explorer.
More examples
- single chart
- single chart - JSON version
- hightlight a path
- hightlight a vertical path
- small multiples
- main example
- main example - JSON version
- demo without web server
Link to sequence explorer on github.
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.