Skip to main content
100%

Sequence explorer - single chart (with JSON file)

✓ Published0🌍 Public
EEE2dev
Last edited Dec 18, 2017
Created on Dec 18, 2017

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.

AI-generated description

Sequence explorer

This example shows how use a single chart sequence explorer.

More examples

Link to sequence explorer on github.


The data is obtained (and mapped to the required format) from the sunburst visualization example from Kerry Rodden.

It is easy to see the pros and cons of these two visualizations for this specific data set.

Similar vizzes

Loading thumbnail…

Sequences sunburst

This sunburst visualization summarizes sequences of user navigation paths through a website, using a D3 v3 partition layout to display hierarchical data derived from a CSV of event sequences. The data is parsed from rows in visit-sequences.csv, where each line is a complete path from root to leaf, and the partition layout computes the intermediate values by summing counts for shared prefixes. The visualization is interactive: hovering over an arc highlights the corresponding sequence and updates a breadcrumb trail at the top, showing the current path from the root. A central label displays the percentage of all visits that begin with the hovered sequence. The legend toggles visibility, and colors represent distinct page types (e.g., home, product, search, account, other, end). The sunburst uses a radial partition layout with arcs sized by the value of each node, and it includes a breadcrumb trail to emphasize the sequence of steps. Percentages are shown explicitly to mitigate the distortion inherent to radial presentations. The example demonstrates how to handle sequence data without pre-generating hierarchical JSON, using a CSV with hyphen-separated steps and an "end" marker for true endpoints. Key features: - Interactive breadcrumb trail emphasizes the sequence. - Percentages shown explicitly to help overcome radial data distortion. - Uses D3 v3 and a partition layout to create the sunburst. - Works with CSV data (no need for pre-generated hierarchical JSON). - Mouse events update the breadcrumbs and percentages on hover. - Toggle legend option to show/hide the color legend. - Hovering over arcs displays the corresponding sequence and percentage of visits.This example demonstrates a D3.js sunburst visualization (partition layout) designed to summarize sequences of events, such as navigation paths through a website. The circular chart displays hierarchical data as a series of concentric rings, where each ring segment represents a step in a sequence, and its arc length encodes the number of visits. The interactive visualization features a breadcrumb trail that updates as users hover over segments, clarifying the current path. Percentages are displayed explicitly to counterbalance the distortion inherent in radial representations. The data is loaded from a CSV file without a header, using hyphens to separate sequence steps and an "end" marker to indicate true endpoints. The visualization is generated using D3 v3 and includes a legend to map steps to colors. The project is licensed under the Apache License 2.0 and was forked from Kerry Rodden's block.

EEE2dev
82% match