Skip to main content
SimilarExport ZIP
100%

Fork of Sequences sunburst

✓ Published0🌍 Public
Ggitdhtuts
Last edited Dec 8, 2022
Created on Dec 7, 2022
Forked from Sequences sunburst

This interactive sunburst chart visualizes hierarchical browser navigation sequences, showing the proportion of visits that begin with each path as a ringed radial layout. Built with D3 v4 in a React framework, it uses `d3.partition()` and `d3.arc()` to render the rings, while a breadcrumb trail above displays the current hovered sequence. The visualization animates on mouseover by fading non-ancestor nodes to 30% opacity and highlights the active path, with color assigned via `d3.scaleOrdinal` and `d3.schemeTableau10`. Data comes from a CSV file of page-access sequences.

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

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
90% 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
90% 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
89% 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
89% match