sequence explorer

100%

sequence explorer - small multiples

✓ Published0🌍 Public

Last edited Dec 19, 2017

Created on Jan 22, 2017

This example uses small multiples to compare state sequences across regions and age groups. Each panel shows a horizontal Sankey-style flow from source to target, with line thickness proportional to the value column. Transitions are encoded with color-coded ribbons linking categorical states (weather, sports, health, travel), and the small-multiple layout lets viewers scan differences in flow volume across the United States, India, Germany, and the United Kingdom, split by age bands. Built with D3 v4, it reads the CSV from a gist.

AI-generated description

This is an example showing the features of sequence explorer. With .percentages([]) (documentation) you can specify different percentages. It affects the tooltip percentages shown. Also the first element in the array determines the percentages shown when you click on a label of the y axis.

More examples

Link to sequence explorer on github.

example data (simulated) contains user click stream data by age and continent. Node info contains information about clients environment (browser, operating system, device)
you can zoom in into one chart by clicking on it
to go back, click again
tooltip of nodes additionally show 4 percentages

Similar vizzes

Loading thumbnail…

sequence explorer - no web server

This example uses the D3.js v4 library to create an interactive sequence explorer diagram directly from inline CSV data, requiring no web server. The visualization maps multi-step flows across categories (weather, health, sports, travel) and stages (1st through 4th), with ribbons sized by frequency values. The data is embedded in a `<pre>` tag, and the custom `sequence-explorer.v20.min.js` library renders the Sankey-style sequence chart, while the accompanying CSS handles layout and styling. The example demonstrates how to load and visualize hierarchical sequence data with D3 v4 entirely from a local HTML file, making it ideal for offline or standalone use.

EEE2dev

78% 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

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 - 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

74% 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

74% 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

73% match

Loading thumbnail…

Sequence explorer - single chart (with JSON file)

This example demonstrates a single-chart sequence explorer visualization built with D3 v4, loaded from an external JSON file. The chart visualizes sequential event flows, with events ordered along the y-axis using the `eventOrder` method (home, product, search, account, other) and the x-axis labeled as "visit" via the `sequenceName` setting. The JSON data defines a directed graph of transitions between events, with values representing the volume of each step. The visualization is instantiated by calling `sequenceExplorer.chart("sequence1.json")` and rendered into a div in the body. This approach highlights the sequence explorer's ability to depict multi-step event pathways, similar to a sunburst but in a linear, flow-based layout, making it easy to compare pros and cons against alternative visualization methods for the same dataset. The data is derived from Kerry Rodden's sunburst example, and the chart is configured to reorder event categories on the y-axis and customize tooltip labels. The single chart version keeps all event sequences in one view, useful for tracking navigation flows or funnel analysis.This example demonstrates how to create a **single-chart sequence explorer** using D3 v4 and data loaded from an external JSON file. The chart visualizes sequential categorical data—here, sequences of website events such as "home", "product", "search", and "account"—as a Sankey-style flow diagram. Each row represents a step in the sequence, and the width of the links corresponds to the number of visits, making it easy to identify common paths and drop-off points. The code shows how to initialize the chart with a JSON file, customize the event order on the y-axis, and rename the x-axis for tooltips. The data is derived from Kerry Rodden’s sunburst example, allowing for a direct comparison between the two visualization approaches for the same dataset.

EEE2dev

73% match

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

73% match