Sequences sunburst

100%

Sequences sunburst

✓ Published0🌍 Public

Last edited Aug 17, 2016

Created on Aug 15, 2016

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.

AI-generated description

An Icicle plot to show all the sequences of assistance sought by recidivists in the SCC homelessness project.

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>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Sequences sunburst

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.

BBBischof

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

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

79% match

Loading thumbnail…

Sequences sunburst

This interactive sunburst visualizes hierarchical sequence data from a CSV file, using a D3 v3 partition layout to show the relative sizes of taxonomic paths. It displays a breadcrumb trail and percentage labels on hover, highlighting the ancestry of a selected node while fading others. The code uses `d3.layout.partition`, `d3.svg.arc`, and `d3.csv.parseRows` to build the chart, with custom color mapping and smooth opacity transitions on mouseleave. A legend toggle and clickable elements enhance exploration of the data.

GGeneExplorer

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

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

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

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

78% match