Breadcrumb

100%

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

This example shows an interactive breadcrumb trail that updates as the user hovers over a grid of colored squares. The breadcrumbs appear as a sequence of arrow-shaped segments, each labeled with a number, and the trail reflects the currently hovered position in the grid. The visualization implements a custom `d3.breadcrumb` function using D3 v4, rendering SVG polygons and text. A live code editor, powered by CodeMirror, allows the user to modify breadcrumb parameters and re-evaluate the code to see the result immediately.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/bumbeishvili/'>bumbeishvili</a>'s block: <a href='http://bl.ocks.org/bumbeishvili/f5cc31e2e7db30c797a2c01277530ef6'>D3 Breadcrumb</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Vertical Breadcrumbs

The visualization shows a vertical breadcrumb navigation with an animated SVG face above it. The breadcrumb links transition from a dark, arrow-shaped style to a flat white design with a green hover effect. The face, drawn using D3 selections and shapes, features animated eyebrows that raise and lower via chained `transition().duration()` calls. The SVG elements include circles for eyes and an arc path for the mouth, all positioned with transforms. The code uses D3’s `select`, `arc`, and transition APIs for the animation.

Aatree-rohit

76% match

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb

This example presents an interactive zoomable icicle chart that visualizes hierarchical biodiversity data, with a breadcrumb trail showing the current path and percentage of the total. The visualization uses D3.js v4 to render SVG rectangles, with foreignObject elements for labels that can be clicked to zoom into a subtree. The breadcrumb trail updates dynamically on click, displaying each ancestor node and the proportion of the total value it represents. The chart uses d3.partition to compute the layout and d3.scaleOrdinal with the Category20c color scheme to differentiate nodes.

Aarun-subba

75% match

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb

This interactive visualization displays hierarchical data as a zoomable icicle chart, using rectangles sized by value and colored by category. Users can click any rectangle to zoom into that branch, while a breadcrumb trail above shows the current path and percentage of the total. The example uses d3.partition, d3.hierarchy, and d3.scaleOrdinal to build the layout, with SVG rect and foreignObject elements for rendering. Breadcrumb polygons are dynamically generated from the ancestor sequence. The code loads data from either biodiversityData.json or data.json, and includes animated transitions via rect.transition and fo.transition.

Aarun-subba

74% match

Loading thumbnail…

Sequences sunburst

This example uses a D3 sunburst (partition layout) to visualize sequences of user navigation paths through a web site, with each arc segment representing a step in a sequence and its size proportional to visit counts. The interactive breadcrumb trail above the chart highlights the current path, while an explicit percentage readout counters the distortion inherent in radial layouts. The animation reveals how visits begin directly on product pages versus navigating from the home page, with colors mapping each step type. The data, loaded from a CSV, supports sequences of varying length and an "end" marker to distinguish true exits from truncated paths.

CCBasis

71% match

Loading thumbnail…

Oh my gosh

This example shows an interactive particle trail that follows the mouse, leaving a fading, expanding ring and a connecting line on a black background. As the pointer moves, the code appends circles that grow, shrink, and change color, while a monotone line links the latest two points. It uses D3 v4 with SVG elements, `d3.mouse` for coordinates, `d3.interpolateSpectral` for hue cycling, and chained `transition` calls with easing to animate each particle. The trail auto-removes old marks after delays, and the color continuously shifts between spectral extremes.

AAlexDaGr8

68% match

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

68% match

Loading thumbnail…

Tooltip

This example demonstrates a customizable tooltip system built with D3 v4, showing how tooltips can appear in different positions relative to hovered elements. It renders a grid of small aqua squares, and hovering over any square changes its color to orange while displaying a tooltip with contextual information about that specific item, such as its number, whether it is even, and its prime status. The tooltip’s appearance and behavior—including direction, color, content rows, and arrow styling—are configured through a reusable `d3.componentsTooltip` API, with live code editing via CodeMirror. The implementation uses SVG rendering and mouse event handlers to trigger tooltip visibility.

663anp3ca

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

67% match