Sequences sunburst

100%

Sequences sunburst

✓ Published0🌍 Public

Last edited Mar 1, 2017

Created on Mar 1, 2017

This interactive visualization displays a sunburst-style partition layout of hierarchical web navigation sequences, where each rectangle represents a step in a user session. The chart uses a d3.layout.partition to map hierarchical data from a CSV file, with color-coded nodes for steps like home, product, and search. Hovering over a node highlights the path of ancestors in a breadcrumb trail, showing the percentage of total visits represented by that sequence. The visualization uses d3.v3, d3.text, and d3.csv.parseRows to load and process the data, with mouse events and transitions providing interactive feedback.

AI-generated description

Forked from my earlier block, <a href='http://bl.ocks.org/kerryrodden/7090426'>Sequences sunburst</a>, just to show what the same data looks like as an icicle chart.

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/ce6b7bf97c6b77ee6dde'>Sequences icicle</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes sequences of user navigation paths through a website, using the D3 v4 partition layout to turn a flat CSV of event sequences into a hierarchical display. The code loads the data with `d3.csvParseRows` and builds the hierarchy programmatically, then colors each arc segment by step name. A breadcrumb trail and percentage label appear on mouseover, while a transition on `mouseleave` restores full opacity to all segments, highlighting the current sequence and its ancestors.

TThanaporn-sk

93% match

Loading thumbnail…

Sequences sunburst

The Sequences sunburst visualization uses a D3 v4 partition layout to display hierarchical data representing sequences of user navigation paths through a website. Each arc segment corresponds to a step in a sequence, with colors mapping to page types (home, product, search, account, other, end). The visualization animates on load, and interactive breadcrumb trails appear above the chart to show the current path. Percentages are displayed in the center, indicating the proportion of visits beginning with the hovered sequence. Data is loaded from a CSV file, and the sunburst helps compare direct product-page visits versus paths starting from the home page.

663anp3ca

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

91% 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

91% match

Loading thumbnail…

Sequences sunburst

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.

GGeneExplorer

91% match

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes sequences of user actions on a website, showing the hierarchical distribution of navigation paths and their frequencies. Hovering over a segment reveals its percentage share of the total and displays the action sequence as a breadcrumb trail above the chart. The visualization uses D3 v4’s `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute and render the radial layout, with data loaded from a CSV file. Mouseover interactions fade non-ancestor segments and update the breadcrumb trail, while a legend toggles visibility.

Aanandkrshnn

90% match

Loading thumbnail…

Sequences sunburst

The Sequences sunburst visualizes hierarchical web navigation paths, showing how visits progress through pages like home, product, and search. Hovering over a segment highlights its ancestors and displays the percentage of total visits that follow that sequence in a breadcrumb trail. Built with D3 v3, it uses `d3.layout.partition` to compute arc positions and `d3.svg.arc` for rendering. The code loads CSV data via `d3.text` and `d3.csv.parseRows`, applies custom colors per segment, and uses opacity transitions and `mouseover`/`mouseleave` events to fade unrelated paths.

Jjf1978

90% match

Loading thumbnail…

Sequences sunburst

This D3.js sunburst visualization summarizes sequences of event paths, such as user navigation through a website, using hierarchical partition layout. It displays paths from root to leaf with colored arcs and an interactive breadcrumb trail that appears on hover, showing the current sequence and its percentage of the total. The code loads CSV data with `d3.csv.parseRows`, builds a hierarchy, and uses `d3.layout.partition` and `d3.svg.arc` for rendering, with transitions fading non-ancestor segments.

MMisunoKitara

90% match