Skip to main content
100%

Sequences sunburst

✓ Published0🌍 Public
CCBasis
Last edited Oct 22, 2013
Created on Jun 17, 2014

This example uses a D3 sunburst (partition layout) to visualize sequences of user navigation paths through a web site, with each arc segment representing a step in a sequence and its size proportional to visit counts. The interactive breadcrumb trail above the chart highlights the current path, while an explicit percentage readout counters the distortion inherent in radial layouts. The animation reveals how visits begin directly on product pages versus navigating from the home page, with colors mapping each step type. The data, loaded from a CSV, supports sequences of varying length and an "end" marker to distinguish true exits from truncated paths.

AI-generated description

This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data that describes sequences of events.

A good use case is to summarize navigation paths through a web site, as in the sample synthetic data file (visit_sequences.csv). The visualization makes it easy to understand visits that start directly on a product page (e.g. after landing there from a search engine), compared to visits where users arrive on the site's home page and navigate from there. Where a funnel lets you understand a single pre-selected path, this allows you to see all possible paths.

Features:

  • works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)
  • interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing
  • percentages are shown explicitly, to help overcome the distortion of the data that occurs when using a radial presentation

If you want to simply reuse this with your own data, here are some tips for generating the CSV file:

  • no header is required (but it's OK if one is present)
  • use a hyphen to separate the steps in the sequence
  • the step names should be one word only, and ideally should be kept short. Non-alphanumeric characters will probably cause problems (I haven't tested this).
  • every sequence should have an "end" marker as the last element, unless it has been truncated because it is longer than the maximum sequence length (6, in the example). The purpose of the "end" marker is to distinguish a true end point (e.g. the user left the site) from an end point that has been forced by truncation.
  • each line should be a complete path from root to leaf - don't include counts for intermediate steps. For example, include "home-search-end" and "home-search-product-end" but not "home-search" - the latter is computed by the partition layout, by adding up the counts of all the sequences with that prefix.
  • to keep the number of permutations low, use a small number of unique step names, and a small maximum sequence length. Larger numbers of either of these will lead to a very large CSV that will be slow to process (and therefore require pre-processing into hierarchical JSON).

I created this example in my work at Google, but it is not part of any Google product. It is covered by the Apache license:

Copyright 2013 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

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