Skip to main content
SimilarExport ZIP
100%

Sequences sunburst

✓ Published0🌍 Public
Bbasskur
Last edited Jan 20, 2020
Created on Jan 20, 2020
Forked from HTML Starter

This interactive sunburst chart visualizes the sequence of pages in a user’s visit, with the central ring showing the first page and outer rings displaying subsequent pages. The size of each arc represents the number of visits following that path. Hovering over an arc reveals the percentage of all visits that begin with that exact sequence. The visualization uses the D3.js v4 library, constructs a radial layout with `d3.arc` paths, and updates an explanation text based on hover events. The example also includes a togglable legend.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
91% 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
90% 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
90% 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
88% match
Loading thumbnail…

Sequences sunburst

A sequences sunburst visualization displays hierarchical path data as a ring of arcs, where each arc’s angle and radius encode the value of a sequence segment. Hovering over an arc highlights its ancestor chain and shows a breadcrumb trail in the upper left, along with the percentage of visits that begin with that sequence. The code uses D3 v4 APIs including `d3.partition`, `d3.hierarchy`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeTableau10` for coloring. Data is loaded from CSV files via `d3.text` and `d3.csvParseRows`.

Ffeizhi123
88% 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
88% 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
88% 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
87% match