sequence explorer

100%

sequence explorer - no web server

✓ Published0🌍 Public

Last edited Dec 18, 2017

Created on Jan 22, 2017

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.

AI-generated description

This is the main example without using a web server. Data is embedded in the html file:

<pre id="data"></pre> contains the data
<pre id="dataNodes"></pre> (optionally) contains the additional quantities of the nodes
<pre id="paths"></pre> (optionally) contains the paths with the flowing particles

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
go to the sankey "United States" - "18-30" to select my path to see the particles flowing. Unselect the path to proceed with the interaction.

Similar vizzes

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

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

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

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

80% match

Loading thumbnail…

sequence explorer - highlight path

This example demonstrates how to highlight a specific user navigation path within a sequence explorer visualization, a Sankey-style diagram showing event flows. The visualization displays sequences of events (home, product, search, account, other) as ribbons and nodes, with the highlighted path traced in orange across the chart. The implementation uses the sequence-explorer library built on D3 v4, loading data from a CSV file and customizing the event order and axis label via method chaining. CSS rules style the highlighted path by targeting specific SVG path and rect elements, applying an orange fill and stroke with partial opacity to emphasize the selected flow.

EEE2dev

79% match

Loading thumbnail…

sequence explorer - small multiples

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.

EEE2dev

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

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

78% match