Skip to main content
SimilarExport ZIP
100%

Sequences sunburst

✓ Published0🌍 Public
Jjf1978
Last edited Jun 2, 2020
Created on Jun 2, 2020

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.

AI-generated description

got this from https://bl.ocks.org/kerryrodden/7090426

MIT Licensed

Similar vizzes

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
94% 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
94% 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
93% 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
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 event-sequence frequencies as a radial partition layout, with each arc segment representing a step in a navigation path and its angular size proportional to the count. Interactive hover highlights the ancestors of a selected sequence and displays a breadcrumb trail with the percentage of the total. Built with d3.v3, the code uses `d3.layout.partition`, `d3.svg.arc`, `d3.csv.parseRows`, and `d3.text` to load the `visit-sequences.csv` data. A legend and toggleable visibility control the color-coded categories, while a fade transition restores full opacity on mouseleave.

MMisunoKitara
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

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