Sequences sunburst

100%

Sequences sunburst

✓ Published0🌍 Public

Last edited Aug 25, 2019

Created on Aug 24, 2019

A sunburst chart shows the make and type of vehicles stolen in São Paulo in August 2019, segmented by exterior color, with each arc’s angle and radius encoding the theft count. Hovering an arc highlights its ancestors and updates a breadcrumb trail with the percentage of total thefts. The visualization uses d3.partition, d3.arc, and d3.hierarchy to layout the hierarchy, loading data via d3.text and d3.csvParseRows. A toggleable legend and a 1-second opacity transition on mouseleave are rendered with d3.select and d3.transition.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

75% match

Loading thumbnail…

Sequences sunburst

The Sequences sunburst visualizes event-sequence frequencies as a radial partition layout, with each arc segment representing a step in a navigation path and its angular size proportional to the count. Interactive hover highlights the ancestors of a selected sequence and displays a breadcrumb trail with the percentage of the total. Built with d3.v3, the code uses `d3.layout.partition`, `d3.svg.arc`, `d3.csv.parseRows`, and `d3.text` to load the `visit-sequences.csv` data. A legend and toggleable visibility control the color-coded categories, while a fade transition restores full opacity on mouseleave.

MMisunoKitara

75% match