Sequences sunburst

100%

Sequences sunburst

✓ Published0🌍 Public

Last edited Aug 17, 2016

Created on Aug 17, 2016

The Sequences sunburst visualizes the paths of assistance sought by recidivists in an SCC homelessness project, with sequences reversed to show where individuals end up rather than where they start. It displays counts from a CSV file as a rectangular tree map, where each sequence is a series of colored segments representing service types. Users hover over a segment to highlight its full ancestry path in the breadcrumb trail and see the percentage of total cases it represents. The code uses d3.layout.partition with d3.text and d3.csv.parseRows to build the hierarchy, along with mouseover and mouseleave event handlers for interaction.

AI-generated description

An Icicle plot to show all the sequences of assistance sought by recidivists in the SCC homelessness project. This has the sequence order reversed so that one can see where the individuals end up, as opposed to where they start.

One issue with this visualization is that some of the sequences are extremely long. The dataset could be cleaned up to avoid these "long sequences" without losing any information.

forked from <a href='http://bl.ocks.org/kerryrodden/'>kerryrodden</a>'s block: <a href='http://bl.ocks.org/kerryrodden/ce6b7bf97c6b77ee6dde'>Sequences icicle</a>

forked from <a href='http://bl.ocks.org/BBischof/'>BBischof</a>'s block: <a href='http://bl.ocks.org/BBischof/67ab570b00d9557e043d79aa26aaca95'>Recidivist Sequences Icicle (Reverse)</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Sequences sunburst

This interactive visualization displays sequences of assistance sought by recidivists in the SCC homelessness project as an icicle plot. The chart uses D3 v3’s `d3.layout.partition` to render hierarchical data from a CSV file, with each rectangle colored by service type. Hovering over a segment fades all other nodes to 30% opacity while highlighting the ancestors, and updates a breadcrumb trail showing the path and percentage of the total. A legend can be toggled on and off, and transitions animate full opacity restoration when the mouse leaves.

BBBischof

91% match

Loading thumbnail…

Sequences sunburst

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.

Ssupermoose

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

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

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

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

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

84% match

Loading thumbnail…

Sequences sunburst

This sunburst visualization summarizes sequences of user navigation paths through a website, using a D3 v3 partition layout to display hierarchical data derived from a CSV of event sequences. The data is parsed from rows in visit-sequences.csv, where each line is a complete path from root to leaf, and the partition layout computes the intermediate values by summing counts for shared prefixes. The visualization is interactive: hovering over an arc highlights the corresponding sequence and updates a breadcrumb trail at the top, showing the current path from the root. A central label displays the percentage of all visits that begin with the hovered sequence. The legend toggles visibility, and colors represent distinct page types (e.g., home, product, search, account, other, end). The sunburst uses a radial partition layout with arcs sized by the value of each node, and it includes a breadcrumb trail to emphasize the sequence of steps. Percentages are shown explicitly to mitigate the distortion inherent to radial presentations. The example demonstrates how to handle sequence data without pre-generating hierarchical JSON, using a CSV with hyphen-separated steps and an "end" marker for true endpoints. Key features: - Interactive breadcrumb trail emphasizes the sequence. - Percentages shown explicitly to help overcome radial data distortion. - Uses D3 v3 and a partition layout to create the sunburst. - Works with CSV data (no need for pre-generated hierarchical JSON). - Mouse events update the breadcrumbs and percentages on hover. - Toggle legend option to show/hide the color legend. - Hovering over arcs displays the corresponding sequence and percentage of visits.This example demonstrates a D3.js sunburst visualization (partition layout) designed to summarize sequences of events, such as navigation paths through a website. The circular chart displays hierarchical data as a series of concentric rings, where each ring segment represents a step in a sequence, and its arc length encodes the number of visits. The interactive visualization features a breadcrumb trail that updates as users hover over segments, clarifying the current path. Percentages are displayed explicitly to counterbalance the distortion inherent in radial representations. The data is loaded from a CSV file without a header, using hyphens to separate sequence steps and an "end" marker to indicate true endpoints. The visualization is generated using D3 v3 and includes a legend to map steps to colors. The project is licensed under the Apache License 2.0 and was forked from Kerry Rodden's block.

EEE2dev

83% match