Sequence explorer

100%

Sequence explorer - visitor flow

✓ Published0🌍 Public

Last edited Feb 19, 2019

Created on Feb 19, 2019

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.

AI-generated description

This example illustrates how to add nodes without paths.

You basically do four things:

In your data file (JSON or csv), data is specified as a collection of paths. For the nodes you want free flowing (no path) you create an "artificial" path to a dummy node, with the name " ". So the label on the axis is invisible.
with sequenceExplorer.eventOrder([...]) you specify the order of the events along the Y axis. Put your dummy event " " to the top (last element in array)
add css to make nodes for the dummy event " " invisible as well as all paths leading to these nodes. (a " " (space) in the event name is substituted to "_" underscore so you can address it with CSS classes.
to have a nice scaling of your nodes/paths, you can add a dummy path from the event " " to the event " " which will be invisible. But if the value of the node is the largest overall, the remaining nodes/ paths are scaled accordingly.

Link to sequence explorer on github.

forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/6b68884490d70aa0092b351e33741d96'>Sequence explorer - single chart (with JSON file)</a>

mit Licensed

Similar vizzes

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

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

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

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

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

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

80% match

Loading thumbnail…

sequence explorer - highlight a vertical path

This example demonstrates how to highlight a vertical path within a sequence explorer visualization, using the D3.js v4 library and the sequence-explorer plugin. It shows a Sankey-style diagram where colored flows and nodes trace a specific sequence—home, account, search, product—through the chart, with the highlighted path emphasized in orange. The data, loaded from a CSV file, contains visit sequences mapped to the required format. The highlight is achieved through CSS styling that targets specific path and rect classes, making the selected vertical route stand out clearly against the rest of the visualization.

EEE2dev

80% match