Skip to main content
100%

Sequences sunburst

✓ Published0🌍 Public
GGeneExplorer
Last edited Apr 27, 2017
Created on Apr 27, 2017

The sequences sunburst visualizes navigation paths through a website as a radial, hierarchical partition layout. It shows the frequency of each sequence of page visits, with a breadcrumb trail and percentage labels clarifying the current path, and a legend toggling color coding for page types. The implementation uses D3 v4’s `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the layout and sums, with `d3.select` handling user interaction. Data is loaded from a CSV file without a header via `d3.text` and `d3.csvParseRows`, and animations use D3’s transition system to fade segments on mouseout.

AI-generated description

(This is a minimal update of my original Sequences sunburst block, to work correctly with d3 v4.)

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 (see the LICENSE file).

forked from <a href='http://bl.ocks.org/kerryrodden/'>kerryrodden</a>'s block: <a href='http://bl.ocks.org/kerryrodden/766f8f6d31f645c39f488a0befa1e3c8'>Sequences sunburst (d3 v4)</a>

apache-2.0 Licensed

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