Sequences sunburst

100%

Sequences sunburst

✓ Published0🌍 Public

Last edited Aug 24, 2019

Created on Aug 24, 2019

A sequences sunburst visualizes hierarchical path data from a CSV of user clickstreams, showing the proportion of each navigation sequence in a metagenome sample. The interactive chart uses d3.partition and d3.arc to render the radial layout, with breadcrumb trails and percentage labels updating on hover via mouseover and mouseleave handlers. It fades non-ancestor segments and animates opacity transitions, using d3.hierarchy and d3.csvParseRows to process the data.

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

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

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

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

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

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

92% match

Loading thumbnail…

Sequences sunburst

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.

EEE2dev

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

91% match