Fork of Sequences sunburst

100%

Fork of Sequences sunburst

✓ Published0🌍 Public

Last edited Apr 14, 2024

Created on Apr 14, 2024

This interactive sunburst diagram displays a game’s asset hierarchy, showing the proportional size of each category and its subcategories. Hovering over a segment highlights the path from the root, displays the percentage of the total, and updates a breadcrumb trail. Built with React and D3 v4, it loads CSV data via `d3.csvParseRows`, constructs a hierarchy with `d3.hierarchy` and `d3.partition`, and renders arcs using `d3.arc`. Colors are assigned using `d3.scaleOrdinal` with `d3.schemeTableau10`, and mouseover/mouseleave events control the highlighting and animation.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Fork of 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.

Ggitdhtuts

88% match

Loading thumbnail…

Sequences sunburst

A sequences sunburst visualization displays hierarchical data as a radial partition layout, where each arc segment represents a node’s proportional value from CSV data. Hovering over a segment highlights its ancestor path and shows a breadcrumb trail with the percentage of total visits, while other segments fade to 30% opacity. The implementation uses D3 v4’s `d3.partition`, `d3.arc`, `d3.hierarchy`, and `d3.scaleOrdinal` with `d3.schemeTableau10` for color mapping. Interactive mouseover and mouseleave events dynamically update the display, with the total size computed from the root node’s aggregated value.

WW9183907

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

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

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

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

84% match

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

84% match

Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes sequences of user navigation paths through a website, using the D3 v4 partition layout to turn a flat CSV of event sequences into a hierarchical display. The code loads the data with `d3.csvParseRows` and builds the hierarchy programmatically, then colors each arc segment by step name. A breadcrumb trail and percentage label appear on mouseover, while a transition on `mouseleave` restores full opacity to all segments, highlighting the current sequence and its ancestors.

TThanaporn-sk

83% match