Sequences sunburst

100%

Sequences sunburst

✓ Published1🌍 Public

Last edited Nov 22, 2018

Created on Nov 22, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/wrigh3tl/'>wrigh3tl</a>'s block: <a href='http://bl.ocks.org/wrigh3tl/57b51dc149576c226accdf907f395cf5'>Site 1 (9/11/15)</a>

MIT Licensed

Similar vizzes

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes sequences of user actions on a website, showing the hierarchical flow of steps from "home" to "product," "search," "account," and other categories. Hovering over a segment fades all unrelated paths and displays the percentage of total visits that sequence represents in a breadcrumb trail. Built with d3.v4, the visualization uses `d3.partition()`, `d3.arc()`, and `d3.hierarchy()` to compute the radial layout from CSV data. The code also includes an animated transition that restores full opacity over one second when the mouse leaves the chart.

MMarcin Hałasa

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

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

95% match

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes the hierarchical distribution of user navigation sequences on a metagenomics site, showing the proportion of each path from the root. Hovering over a segment highlights its ancestor chain and displays a breadcrumb trail with the exact percentage of total visits. The code uses `d3.partition` and `d3.arc` to compute and draw the arcs, while `d3.hierarchy` and `d3.csvParseRows` process the input data. Mouseover events trigger opacity transitions and breadcrumb updates, with colors mapped to distinct step names.

GGulrez

93% match

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

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

92% 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 a D3 partition layout to depict sequences of events, such as website navigation paths, as concentric arcs radiating from the center. Each step in a sequence is represented by a colored arc, with the breadcrumb trail above the chart emphasizing the current path and interactive hover states revealing exact percentages for each segment. The visualization reads a CSV file where each row is a complete path from root to leaf, with steps separated by hyphens and an explicit "end" marker to distinguish true endpoints from truncated ones. A legend toggles the display of step colors, and the center of the sunburst shows the weight of the hovered segment, helping users interpret the radial distortion. The example uses D3 v3, with synthetic data illustrating navigation paths through a website, making it easy to compare visits that start directly on a product page versus those that begin on the home page.

CCBasis

92% match