Visualizing meetup attendence with sequence explorer (3)

100%

Visualizing meetup attendence with sequence explorer (3)

✓ Published0🌍 Public

Last edited Apr 4, 2017

Created on Apr 3, 2017

This visualization uses a sequence explorer (Sankey-style) diagram to track Meetup attendee behavior across three consecutive events. The data is loaded from a CSV and encoded as flows between states: before meetup 1 and meetup 1 through meetup 3, with categories such as “joined meetup group”, “responded and showed up”, “did not respond”, and “responded No”. Each flow’s thickness is proportional to the number of members following that path, and the red-highlighted “responded but did not show up” category is emphasized via CSS. The chart is implemented with D3 v4 and the custom sequenceExplorer plugin, with member group cohorts preserved throughout the sequence.

AI-generated description

Sequence explorer

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.

Similar vizzes

Loading thumbnail…

Visualizing meetup attendence with sequence explorer

This example uses a sequence explorer to visualize meetup attendance across three consecutive events. The sankey-style diagram, built with D3 v4, tracks member cohorts through states like "joined meetup group," "did not respond," and "responded and showed up" across time. Each flow encodes the number of members transitioning between categories for each meetup, with red highlighting for the "responded but did not show up" category. The sequence explorer layout emphasizes temporal flow and category transitions, making it easy to see how attendee behavior evolves over multiple meetups.

EEE2dev

96% match

Loading thumbnail…

Sequence explorer - visualizing meetup attendence

This example visualizes meetup attendance as a sequence of sankey diagrams, tracking how members flow between three sequential meetup events. Each column represents a meetup (or the "new member" start), while nodes within each column correspond to RSVP states—such as "responded and showed up," "did not respond," or "responded No"—and the ribbons encode member counts. The data is loaded from a CSV file and rendered using the custom sankeySeqExplorer library built on D3 v4. Node labels can be toggled, and the chart highlights member cohorts (e.g., "members since meetup 1") across the event sequence, with red indicating members who responded but did not show up. This example demonstrates a specialized sequence explorer for tracking attendee behavior across consecutive Meetup events.

EEE2dev

92% match

Loading thumbnail…

Sequence explorer - main example (with JSON file)

This example uses the D3.js-based sequence explorer library to visualize event sequences from a Meetup group's attendance records. The small-multiple Sankey charts show how different member cohorts (grouped by join time) respond to meetup announcements over time. Each row represents a member subset, while each column shows responder timing. Interactions include clicking to enlarge a chart, toggling percentage views via axis labels, and animating along selected paths. Custom styling highlights members who responded but did not show up in red. The JSON input configures the chart with custom event ordering, corresponding events, and a person-shaped particle animation.

EEE2dev

86% match

Loading thumbnail…

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.

EEE2dev

85% match

Loading thumbnail…

Sequence explorer - visitor flow (2)

This example visualizes visitor flow through a sequence of events using a Sankey-like diagram, where nodes represent event steps and paths show transitions between them. It highlights specific paths with person icons and colors one node orange via CSS. The visualization uses the sequence-explorer library built on D3 v4, with APIs like `.nodePadding()`, `.particleShape("person")`, and `.correspondingEvents()` to control scaling, particle icons, and percentage calculations. Data is loaded from a JSON file defining node values and named paths, while tooltips show percentages of same-event sequences.

EEE2dev

80% match

Loading thumbnail…

Sequence explorer - visitor flow

This example shows a sequence explorer visualization that tracks visitor flow through events, using a Sankey-style diagram where nodes represent event steps and paths represent transitions between them. It demonstrates how to include free-floating nodes by adding an invisible dummy event, here named a space, which appears as a hidden node on the y-axis. The code uses the D3 v4 library with a custom `sequenceExplorer` plugin, loading data from a JSON file where each link specifies source and target event positions. The `eventOrder` API arranges the visible events (C, B, A) while the dummy event is pushed to the top, and CSS rules hide its nodes and paths. A dummy path with a large value ensures proportional scaling of all other nodes and paths.

EEE2dev

77% match

Loading thumbnail…

sequence explorer - single chart

The sequence explorer example visualizes user navigation flows as a Sankey-style diagram, mapping event sequences from a CSV file where each row records a transition between steps (e.g., "home" to "product"). It shows the aggregated volume of paths, with the y-axis ordered by event type and the x-axis representing sequence position. The chart is built using D3 v4 and the custom `sequenceExplorer.chart` API, which loads the data from `sc.csv` and applies configuration methods like `.eventOrder()` to reorder categories and `.sequenceName()` to customize tooltip labels. Rendering relies on D3’s selection and data-join mechanics, with the chart appended to a div via `.call(myChart)`. The data originates from Kerry Rodden’s sunburst example, highlighting comparative strengths of sequential flow vs. hierarchical layouts.

EEE2dev

76% match

Loading thumbnail…

sequence explorer - with events not connected to the next one

This example shows a sequence explorer visualization where individual events are displayed as horizontal bands that do not connect from one step to the next, emphasizing discrete stages rather than continuous flow. The chart uses D3 v4 and the custom `sequence-explorer.v20.min.js` library, with data loaded from embedded CSV-like text blocks. It renders nodes as rectangles and paths with varying stroke widths based on frequency values, while the CSS rule `path.lsx1.ltx1 { stroke: none; }` hides all vertical segments, making only horizontal transitions visible. The code initializes the chart via `sequenceExplorer.chart().showNodeLabels(false)` and binds it to a `div` using `.call()`, with a sample dataset containing frequencies for drinks like beer and cider across three time steps.

EEE2dev

75% match