Skip to main content
100%

sequence explorer - with events not connected to the next one

✓ Published0🌍 Public
EEE2dev
Last edited Jan 20, 2018
Created on Dec 24, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/e7142501bc30b137a419f1a24c27c48a'>sequence explorer - with events not connected to the next one </a>

mit Licensed

Similar vizzes

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