Sequences sunburst

100%

Sequences sunburst

✓ Published0🌍 Public

Last edited Feb 21, 2019

Created on Feb 21, 2019

This sunburst chart visualizes hierarchical sequence data as an interactive radial layout, with each ring segment representing a step in a user journey. Built with D3 v4, it uses a partition layout and arcs sized by value. Hovering over any segment fades all non-ancestor paths and displays a breadcrumb trail above the chart, showing the sequence of steps leading to the hovered node along with the percentage of visits that follow that path. The visualization also includes a toggleable legend and a centered explanation text that updates dynamically. The data is loaded from a CSV file and converted into a hierarchical JSON structure for rendering. Animated transitions are not used; instead, interaction is driven by mouseover and mouseleave events. The example is adapted from Kerry Rodden's block and licensed under Apache 2.0.

AI-generated description

To display longer text on the upper left,

you can either:

increase the width of the rectangles by:

// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
   var b = {
     w: 175, h: 30, s: 3, t: 10
     };```

and/or decrease the font-size:

  #sequence text{
    font-size: 10px;
  }
</style>```

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 chart visualizes hierarchical sequences from a CSV of page-access paths, showing the proportion of visits that begin with each sequence. Hovering over an arc highlights its ancestor path in the breadcrumb trail and displays the percentage of total visits it represents, while fading unrelated segments. Built with D3 v4, it uses `d3.partition()`, `d3.arc()`, and `d3.hierarchy()` to compute the radial layout, with colors from `d3.schemeTableau10`. The data is parsed from CSV rows into a tree structure via `d3.csvParseRows()`. Mouseover and mouseleave events drive the interactive highlighting and opacity transitions.

Bbertieip

93% match

Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes user navigation sequences on a website, showing the proportion of visits for each path segment. Built with D3.js v4, it uses a radial partition layout to display hierarchical data from a CSV file. Hovering over a segment highlights its ancestor path in the breadcrumb trail and displays the percentage of total visits. The visualization uses `d3.partition()` for the layout and `d3.arc()` for rendering arcs, with a fade transition effect on mouse leave. A legend toggle allows users to show or hide the color key.

GGabriel Diaconescu

92% match

Loading thumbnail…

Sequences sunburst

This sunburst visualization uses D3’s partition layout to depict sequences of user navigation paths through a website, based on a CSV of visit sequences (e.g., "home-search-end"). Each arc’s angular extent encodes the count of visits for that step, with colors mapping to page names and a central text panel showing the percentage of visits for the hovered path. Interactive features include a breadcrumb trail that highlights the current sequence and a legend with a toggle. A mouseover on an arc updates the breadcrumb and percentage display, while leaving the sunburst resets the view. The chart handles hierarchical data without pre-generated JSON, using `d3.layout.partition` and an animated, hover-driven transition to reveal the sequence breakdown. The design emphasizes clarity for first-time users by showing percentages explicitly and providing a legend toggle to aid interpretation. The code is based on Kerry Rodden's block and is licensed under the Apache License 2.0.

AAdlopez2016

92% match

Loading thumbnail…

Sequences sunburst - KR Original

This interactive sunburst chart visualizes hierarchical sequences of user actions on a website, showing the proportion of each path through categories like home, product, and search. Hovering over a segment highlights its ancestor path and displays the percentage of total visits, while a breadcrumb trail above shows the current sequence. Built with D3 v4, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and render the radial layout, with data loaded from a CSV file. The visualization fades non-ancestor segments on mouseover and includes an optional legend toggle.

Mmadroscla

92% match

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes hierarchical page-sequencing data from a CSV file, showing the proportion of visits that begin with each sequence of pages. The visualization uses a radial partition layout, with arcs representing nodes and an interactive breadcrumb trail displaying the current path. Built with D3 v4, it utilizes `d3.partition`, `d3.arc`, and `d3.hierarchy` to structure data, while `d3.scaleOrdinal` and `d3.schemeTableau10` assign colors to segments. Hovering over a segment highlights its ancestors in the sequence, and the central explanation shows the percentage of visits associated with that path.

LLo-ov

92% match

Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes hierarchical sequences of page visits, using a radial partition layout where each arc represents a path segment and its size reflects visit counts. Hovering over an arc highlights the entire ancestor chain in the breadcrumb trail above and displays the percentage of visits for that sequence. Built with D3 v4, it uses `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the layout, with colors assigned via `d3.scaleOrdinal` and `d3.schemeTableau10`. Data comes from CSV files parsed with `d3.csvParseRows`.

LLo-ov

92% match

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

Loading thumbnail…

Sequences sunburst

A sequences sunburst visualizes hierarchical data as concentric arcs, where each ring segment represents a step in a path and its angular width encodes the relative size of that sequence. The example uses d3.partition and d3.arc to compute and draw the layout, with d3.hierarchy and d3.csvParseRows processing the visit-sequences.csv data. Hovering over a segment highlights its ancestor path, fades all others, and updates a breadcrumb trail showing the sequence and its percentage of the total, while a legend toggles visibility. The visualization uses d3 transitions to restore opacity when the mouse leaves the chart.

GGabriel Diaconescu

92% match